📌  相关文章
📜  如何使用 JavaScript 返回 HTML 或构建 HTML？

📅  最后修改于: 2021-10-29 04:07:21             🧑  作者: Mango

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

很少有 JavaScript 方法称为 createElement() 和 appendChild()，我们可以使用它们动态地向 DOM 树添加节点。

示例 1：创建 div 元素

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

let div_element = document.createElement("div")

示例 2：向 HTML 元素添加子节点

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

并且您想在 div 中添加一个段落元素。下面是代码片段

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

HTML
    
  
  • Food
    • 
  
  • Milk
    • 
  
  • Vegetable
    •

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

Javascript
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


  

    

  
    

    

  

这段代码片段是在 appendChild() 方法的帮助下在 div 中添加一个段落元素。

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

考虑一个包含 3 个列表项的无序列表。并且您想删除其中的第一个子

  • 元素。

    HTML 

      
  
    • Food
      • 
  
    • Milk
      • 
  
    • Vegetable
      •

    使用 removeChild() 方法，我们可以从无序列表中删除第一个

  • 子项：

    Javascript 

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

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

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

    Javascript 

    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 

    

  

    
    
  
    
    
    

  

    输出：