JS-DOM创建，appendChild不能执行？

你好，我是新的，尝试创建DOM，但我与appendChild奇怪的问题卡住，而第一次尝试和第二次的作品，但第三我完全不知道。这是我的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>

，但林坚持创造h1一个新的appendChild这是DOM另一newChild对象了。这里是我的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

您应该使用document.createElement而不是document.createAttribute为h1, span, p

你应该这样做：

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，我没有注意到，40分钟++试着找出方法 - 呼叫问题LOL –

@DellWatson我编辑了我的回应与一个工作示例 – mattias

JS-DOM创建，appendChild不能执行？

回答

相关问题