JS-DOMの作成、appendChildを実行できませんか？

こんにちは私は新しくDOM作成を試みていますが、appendChildの奇妙な問題に悩まされています.1回目と2回目は動作しますが、3回目は完全にわかりません。これが私のHTMLです：JS-DOMの作成、appendChildを実行できませんか？

<html> 
    <head> 
    <title>Tugas Anchor DOM!</title> 
    </head> 
    <body> 
    <div id="main"> 
    </div> 
    <script src="script.js"></script> 
    </body> 
</html>

と、私はこれにDOMとHTMLに変換します：

<html> 
    <head> 
    <title>Tugas Anchor DOM!</title> 
    </head> 
    <body> 
    <div id="main"> 
     <div id="content"> 
     <div class="content-post"> 
      <h1>Judul Post</h1> <!-- IM STUCK HERE --> 
      <button class="share-post-btn">Share this Post</button> 
     </div> 
     <div class="content-post"> 
      <h1>Judul Post 2</h1> 
     </div> 
     </div> 
    </div> 
    <script src="script.js"></script> 
    </body> 
</html>

が、ImはあまりにもDOMで別のnewChildであるh1のための新しいのappendChildを作成するために立ち往生。ここは私のjsです：

var menu = document.getElementById("main"); 
var mainDiv = document.createElement("div"); 
var newDiv1 = document.createElement("div"); 
var newDiv2 = document.createElement("div"); 
var newH1 = document.createAttribute("h1"); 

var newButton = document.createAttribute("button"); 

var createId = document.createAttribute("id"); 
var createAtt = document.createAttribute("class"); 

createId.value ="content"; 
createAtt.value = "content-post"; 

//top 
mainDiv.setAttributeNode(createId); 
menu.appendChild(mainDiv); 

//1st 
newDiv1.setAttribute('class','content-post'); 
mainDiv.appendChild(newDiv1); 


var judul1 = newDiv1.appendChild(newH1); //appendChild can't be executed here ? 
// judul1.innerHTML = "Judul Post"; 

//2nd 
newDiv2.setAttribute('class','content-post'); 
mainDiv.appendChild(newDiv2);

出典

2016-12-06 Dell Watson

あなたはあなたが何をすべきh1, span, p

ためdocument.createElementの代わりdocument.createAttributeを使用する必要があります。

var mainDiv = document.getElementById('main'); 
var contentDiv = document.createElement('div'); 
var contentPostDiv1 = document.createElement('div'); 
var contentPostDiv2 = document.createElement('div'); 
var judul1 = document.createElement('h1'); 
var judul2 = document.createElement('h1'); 
var button = document.createElement('button'); 

contentDiv.setAttribute('id', 'content'); 
mainDiv.appendChild(contentDiv); 

contentPostDiv1.setAttribute('class','content-post'); 
contentPostDiv2.setAttribute('class','content-post'); 

contentDiv.appendChild(contentPostDiv1); 
contentDiv.appendChild(contentPostDiv2); 

judul1.innerHTML = 'Judul Post' 
button.setAttribute('class', 'share-post-btn'); 
button.innerHTML = 'Share this Post' 

contentPostDiv1.appendChild(judul1); 
contentPostDiv1.appendChild(button); 

judul2.innerHTML = 'Judul Post 2'; 

contentPostDiv2.appendChild(judul2);

出典

2016-12-06 20:50:05 mattias

OK THX、私はMETHOD-を把握する++トラインを40分、気づいdidntのコールの問題LOL –

@DellWatson私は実際の例で私の回答を編集しました – mattias

JS-DOMの作成、appendChildを実行できませんか？

答えて

関連する問題