純粋にjavascriptを使ってHTMLページにHTMLとCSSを挿入することはできますか？

Question

私は現在、Arcadier（Arcadier.com）というマーケットプレイスソリューションを使用しています。このソリューションを使用すると、javascriptによる編集だけでマーケットプレイスをカスタマイズできます。

私はjavascriptの

を追加することによって、私はここに（インラインCSSを使用して）HTMLで純粋な部分を作ったサイトのホームページ上に言葉で新しいセクションを追加することができればこのように私は思っていました。

<div style="height:400px; width:100%"> 

    <h1>About Us</h1> 

    <div style="max-width:120px;"><img></div>` <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,.</p> 

    <a href="#">Click here</a> 

</div> 

javascriptでこのhtmlをindex.htmlページにレンダリングすることはできますか？ 現在、このソリューションが実行可能かどうかを確認するために、ダミーのテキスト情報を使用しています。

Answer 1

このコードをJavascriptで実行してください。それはあなたの問題を助けるかもしれません。

// Create a div element 
var newDiv= document.createElement('div'); 

// Assign id, it help you to set the style 
newDiv.id = 'NewDiv'; 


// Dont forget to inspect the html page and get the body class and the class you want to append the new container 
$('.page-home .main').append(newDiv); 


//Create H2 element 
var newH2= document.createElement('h2'); 


//add the text using innerHTML inside H2 elements 
newH2.innerHTML = "I'm the new div"; 


//then append the H2 element into the div you created 
$('#NewDiv').append(newH2); 


//for style, use the ID you declare to the element 
$('#NewDiv').css({'height':'100px', 'margin-top':'20px', 'text-align':'center'}); 


//if you want to add some images, you can add only those image from web 

var newImg = document.createElement("img"); 
newImg .id = 'NewImg'; 
newImg.src = "https://tse1.mm.bing.net/th?id=OIP.M6507d99cb13e01bdf824b2bd0277cf03H0&pid=15.1&P=0&w=300&h=300"; 

$('#NewDiv').append(newImg); 
$('#NewImg').css({'width':'55px'}); 

は、ITはあなたを助けることを願っています:)

Answer 2

私は、Google検索を実行したときにスタイル属性を設定する例と同様に、要素を作成するいくつかの例を見つけました。結果を使用して以下の例を作成しました

// Create a div element 
var elem = document.createElement("div"); 

//Set elements innerHTML 
elem.innerHTML="hey"; 


//Add the element to body 
document.body.appendChild(elem); 

//add style attribute to element 
elem.setAttribute('style','color:red');