DOM Insert and Append

最新推荐文章于 2021-08-11 00:57:56 发布

yangxiaojun9238

最新推荐文章于 2021-08-11 00:57:56 发布

阅读量627

点赞数

分类专栏： JAVASCRIPT学习笔记文章标签： insert function button input action div

本文链接：https://blog.csdn.net/yangxiaojun9238/article/details/7319588

版权

JAVASCRIPT学习笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<html>
 
<head>
 
<title>DOM Adding</title>
 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 
<script type="text/javascript"> 
 
<!--
 
function makeNode(str)
 
{
 
  var newParagraph = document.createElement("p");
 
  var newText = document.createTextNode(str);
 
  newParagraph.appendChild(newText);
 
  return newParagraph;
 
}
 
 
function appendBefore(nodeId, str)
 
{
 
 var node = document.getElementById(nodeId);
 
 var newNode = makeNode(str);
 
 if (node.parentNode)
 
   node.parentNode.insertBefore(newNode,node);
 
}
 
 
 
function insertWithin(nodeId, str) 
 
{
 
 var node = document.getElementById(nodeId);
 
 var newNode = makeNode(str);
 
 node.appendChild(newNode);
 
}
 
 
 
function appendAfter(nodeId, str) 
 
{
 
 var node = document.getElementById(nodeId);
 
 var newNode = makeNode(str);
 
 
 
 if (node.parentNode)
 
  { 
 
    if (node.nextSibling)
 
       node.parentNode.insertBefore(newNode, node.nextSibling);
 
    else
 
       node.parentNode.appendChild(newNode);
 
  }
 
}
 
//-->
 
</script>
 
</head>
 
<body>
 
<h1>DOM Insert and Append</h1>
 
<hr />
 
<div style="background-color:#66ff00;">
 
  <div id="innerDiv" style="background-color:#ffcc00;"></div>
 
</div>
 
<hr />
 
<form id="form1" name="form1" action="#" method="get">
 
  <input type="text" id="field1" name="field1" />
 
  <input type="button" value="Before"
 
         οnclick="appendBefore('innerDiv',document.form1.field1.value);" />
 
  <input type="button" value="Middle"
 
         οnclick="insertWithin('innerDiv',document.form1.field1.value);" />
 
  <input type="button" value="After"
 
         οnclick="appendAfter('innerDiv',document.form1.field1.value);" />
 
</form>
 
</body>
 
</html>

yangxiaojun9238

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM Insert and Append

DOM Adding <!-- function makeNode(str) { var newParagraph = document.createElement("p"); var newText = document.createTextNode(str); newParagraph.appendChild(n
复制链接

扫一扫

专栏目录