JavaScript 如何返回HTML或构建HTML

JavaScript非常强大，我们可以使用它来构建动态网页内容和为Web应用程序添加许多功能。我们可以使用HTML创建网页的结构，同样地，我们也可以使用JavaScript来做同样的事情。

有几个名为createElement()和appendChild()的JavaScript方法，我们可以使用它们在DOM树中添加节点。

示例1：创建一个div元素

假设你只想创建一个div元素，那么下面是代码片段：

let div_element = document.createElement("div")

示例2: 向HTML元素添加一个子节点

假设有一个带有ID“divele”的div

<div id="divele"></div>

而且你想在div中添加一个段落元素。以下是代码片段：

let div_elem = document.getElementById("divele") 
  
let child_p_elem = document.createElement("p") 
  
div_elem.appendChild(child_p_elem)

这段代码片段通过使用appendChild()方法，在div内添加了一个段落元素。

示例3：删除HTML元素的子节点

假设有一个无序列表，其中有3个列表项。你想删除其中的第一个子节点<li>元素。

<ul id="ulele"> 
  <li>Food</li> 
  <li>Milk</li> 
  <li>Vegetable</li> 
</ul>

使用 removeChild() 方法，我们可以从无序列表中删除第一个 <li> 子元素：

let ul_ele = document.getElementById("ulele") 
  
// 0 represents the first child 
ul_ele.removeChild(ul_ele.childNodes[0])

示例4：访问父HTML元素的所有子元素

现在，要访问具有id“divele”的div的所有子元素，我们将使用childNodes()方法来返回所需的子节点。

let div_ele = document.getElementById("divele") 
  
// Returns an array of child nodes 
// contained inside the parent node 
let div_ele_childs = div_ele.childNodes

请找到下面即将开发的简单网页的快照。完整代码： HTML

<body> 
    <div id="divele"> 
  
    </div> 
    <script type="text/javascript"> 
        let parentDiv = document.getElementById("divele") 
  
        let heading = document.createElement("h1") 
  
        let unordered_list = document.createElement("ul") 
  
        unordered_list.setAttribute("id", "ulele") 
  
        heading.style.color = "green" 
        heading.textContent = "GeeksforGeeks" 
  
        parentDiv.appendChild(heading) 
  
        parentDiv.appendChild(unordered_list) 
  
        for (let i = 0; i < 4; i++) { 
            let li_elem = document.createElement("li") 
            unordered_list.appendChild(li_elem) 
        } 
  
        unordered_list.childNodes[0].textContent = "Java"
        unordered_list.childNodes[1].textContent = "Python"
        unordered_list.childNodes[2].textContent = "Javascript"
        unordered_list.childNodes[3].textContent = "C#"
    </script> 
</body>

输出：

JavaScript 如何返回HTML或构建HTML