Home >Web Front-end >JS Tutorial >Summary of methods for inserting DOM object nodes using JS

Summary of methods for inserting DOM object nodes using JS

php中世界最好的语言Original: 2018-06-11 14:30:562043browse

This time I will bring you a summary of the method of inserting DOM object nodes with JS. What are the precautions for inserting DOM object nodes with JS? The following is a practical case, let's take a look.

1 Introduction

Inserting nodes is achieved by using the insertBefore() method.

insertBefore()The method will insert a new child node before another child node.

obj.insertBefore(new,ref)

new: Represents a new child node.
ref: Specify a node and insert a new node before this node.

Second Application

Insert a node. In this example, enter the text to be inserted in the text box on the page, and then click "Insert Before" ” button inserts text into the page.

Three complete sample codes:

<!DOCTYPE html>
<html>
<head>
<title>w插入节点</title>
<script language="javascript">
 <!--
 function crNode(str)
 {
  var newP=document.createElement("p");
  var newTxt=document.createTextNode(str);
  newP.appendChild(newTxt);
  return newP;
 }
 function insetNode(nodeId,str)
 {
   var node=document.getElementById(nodeId);
   var newNode=crNode(str);
   if(node.parentNode) //判断是否拥有父节点
   node.parentNode.insertBefore(newNode,node);
 }
 -->
</script>
</head>
<body>
 <h2 id="h">在上面插入节点</h2>
 <form id="frm" name="frm">
 输入文本：<input type="text" name="txt" />
 <input type="button" value="前插入" onclick="insetNode(&#39;h&#39;,document.frm.txt.value);" />
 </form>
</body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other php Chinese websites related articles!

Summary of methods for inserting DOM object nodes using JS

Related articles