JS-DOM-creation , appendChild 无法执行？

Question

你好，我是新手，正在尝试 DOM-creation，但我遇到了 appendChild 的奇怪问题，第一次尝试和第二次都有效，但第三次我完全不知道。这是我的 HTML:

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

我会将 HTML 和 DOM 转换为：

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

Answer 1

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

JS-DOM-creation , appendChild 无法执行？

JS-DOM-creation , appendChild can't be executed?

html

javascript

dom

appendchild