日度归档:2020年3月25日

html DOM对象之方法appendChild()的简介说明


摘要:
下文讲述DOM对象之方法appendChild()的功能简介说明,如下所示:


DOM appendChild()方法简介

appendChild()方法的功能:
在指定的元素的尾部追加一个子元素的方法

appendChild()方法语法说明:
target.appendChild(newChild)
—-参数说明—-
1.targetElement:目标元素
2.newChild:子元素的html信息


appendChild()方法注意事项:
目前市面上流行的浏览器都支持此方法


DOM appendChild()方法举例说明:

例:

   <!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---DOM appendChild方法举例说明
</title> 
<style> 
p{
 background-color:green;
 width:10px;
 height:10px;																													
}
#target{
  width:200px;
  height:80px;
  background-color:blue;
}
</style>  
<script>
window.onload = function() { 
  let oTarget=document.getElementById("target");
  let obt=document.getElementById("btn");
 
  obt.onclick = function() {
     var p=document.createElement("p");
    oTarget.appendChild(p);
  }
}
</script>  
</head>
<body>
<hr> 

<div id="target"></div>
<input type="button" id="btn" value="函数测试"/>
</body>
</html>
 
javascript DOM appendChild方法举例说明

javascript DOM appendChild方法举例说明

html DOM对象之方法insertAdjacentText()的简介说明


摘要:
下文讲述DOM对象之方法insertAdjacentText()的功能简介说明,如下所示:


DOM insertAdjacentText()方法简介

insertAdjacentText()方法的功能:
在指定的元素前面插入由文本信息到指定的位置

insertAdjacentText()方法语法说明:
target.insertAdjacentText(position,text)
—-参数说明—-
1.targetElement:目标元素
2.position:插入元素位置的方式
3.text:插入到节点的信息
position属性值是四个表示位置的关键字:
1.beforebegin:规定在目标元素的外部开始位置插入。
2.afterbegin:规定在目标元素的内部开始位置插入。
3.beforeend:规定在目标元素的内部结束位置插入。
4.afterend:规定在目标元素的外部结束位置插入


insertAdjacentText()方法注意事项:
目前市面上流行的浏览器都支持此方法


DOM insertAdjacentText()方法举例说明:

例:

   <!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---DOM insertAdjacentText方法举例说明
</title> 
<style> 
#target{
  width:200px;
  height:80px;
  background-color:blue;
}
</style>  
<script>
window.onload = function() { 
  let oTarget=document.getElementById("target");
  let obt=document.getElementById("btn");
 
  obt.onclick = function() {
    var a = new Date();
    oTarget.insertAdjacentText("beforebegin",a);
  }
}
</script>  
</head>
<body>
<hr>
<div id="target"></div>
<input type="button" id="btn" value="函数测试"/>
</body>
</html>
javascript DOM insertAdjacentText方法举例说明

javascript DOM insertAdjacentText方法举例说明

html DOM对象之方法insertAdjacentHTML()的简介说明


摘要:
下文讲述DOM对象之方法insertAdjacentHTML()的功能简介说明,如下所示:


DOM insertAdjacentHTML()方法简介

insertAdjacentHTML()方法的功能:
在指定的元素前面插入由字符串组成的html信息到指定的位置

insertAdjacentHTML()方法语法说明:
target.insertAdjacentHTML(position,string)
—-参数说明—-
1.targetElement:目标元素
2.position:插入元素位置的方式
3.string:插入的字符串html信息
position属性值是四个表示位置的关键字:
1.beforebegin:规定在目标元素的外部开始位置插入。
2.afterbegin:规定在目标元素的内部开始位置插入。
3.beforeend:规定在目标元素的内部结束位置插入。
4.afterend:规定在目标元素的外部结束位置插入


insertAdjacentHTML()方法注意事项:
目前市面上流行的浏览器都支持此方法


DOM insertAdjacentHTML()方法举例说明:

例:

   <!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---DOM insertAdjacentHTML方法举例说明
</title> 
<style>
#p{
  width:100px;
  height:50px;
  background-color:red;
}
#target{
  width:200px;
  height:80px;
  background-color:blue;
}
</style>  
<script>
window.onload = function() { 
  let oTarget=document.getElementById("target");
  let obt=document.getElementById("btn");
 
  obt.onclick = function() {
    oTarget.insertAdjacentHTML("beforebegin","<p id='p'></p>");
  }
}
</script>  
</head>
<body>
<hr>
<div id="target"></div>
<input type="button" id="btn" value="函数测试"/>
</body>
</html>
javascript DOM insertAdjacentHTML方法举例说明

javascript DOM insertAdjacentHTML方法举例说明