JS-DOM-Erstellung, appendChild kann nicht ausgeführt werden?

Hallo ich bin neu und versuche DOM-creation, aber ich bin mit seltsamen Problem mit appendChild beim ersten Versuch stecken und 2. es funktioniert aber die 3. Ich habe total keine Ahnung. diese ist mein HTML:JS-DOM-Erstellung, appendChild kann nicht ausgeführt werden?

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

und ich werde HTML mit DOM zu dieser Transformation:

<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>

aber ich bin stecken einen neuen appendChild für h1 zu schaffen, die zu einem anderen newChild von DOM ist. hier ist mein 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);

Quelle

2016-12-06 Dell Watson

Sie sollten document.createElement anstelle von document.createAttribute für h1, span, p

sollten Sie tun:

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);

Quelle

2016-12-06 20:50:05 mattias

ok thx, didnt ich bemerkt, dass, 40 Minuten ++ tryin Methoden-, um herauszufinden, Call Problem LOL –

@DellWatson Ich habe meine Antwort mit einem Arbeitsbeispiel bearbeitet – mattias

JS-DOM-Erstellung, appendChild kann nicht ausgeführt werden?

Antwort

Verwandte Themen