第七章 动态创建标记

传统方法

document.write()

即使把document.write语句挪到外部函数,也还是需要在标记的body部分使用script标签才能调用那个函数。

function insertParagraph(text){
	var str = "

"; str += text; str += "

"
; document.write(str); }

我们把这个函数保存到外部JS文件中,为了调用这个函数,必须在标记里插入script标签:

<!DOCTYPR html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Testtitle>
	<script scr="example.js">script>
head>
<body>
	<script>
		insertParagraph("This is inserted.");
	script>
body>
html>

应该避免使用document.write方法

innerHTML 属性

这个属性可以用来读、写某给定的元素里的HTML内容,一旦使用它,目标篇元素里的内容将全会被替换掉。

//该方法将会把一段HTMl内容插入对应的标签
window.onload = function(){
	var testdiv = document.getElementById("testdiv");
	testdiv.innerHTML = "

I inserted this content.

"
}

DOM方法

createElement方法

var para = document.vreateElement("p");

上面这条语句将创建一个新的p元素,并赋值给一个变量。此时它已经是一个元素节点,但没有连接到DOM树上。

appendChild方法

把新创建的节点插入到某个文档的节点树的最好的办法就是,让他成为这个文档某一个现有节点的子节点。

var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);

createTextNode方法

createElement方法只能创建元素节点,想把文本放入p元素,要创建一个文本节点,用方法createTextNode。

vat text = document.createTextNode(text);

和createElement方法一样,此时这个节点也是javascript世界里的一个孤儿,没有被插入任何一个文档。我们可以使用appendChild方法,把这个文本节点插入为某个现有元素的子节点上。
这样就达到动态创建标记的目的了。

insertBefore()

这个方发将把一个新元素插入到一个现有的元素前面。使用方法:1.新元素:想插入的元素。2.目标元素:插入到那个元素之前。3.父元素:目标元素的父元素。

//模板
parentElement.insertBefore(newElement,targetElement)

在现有元素后插入一个新元素

DOM本身没有实现,要自己编写。

function insertAfter(newElement,targetElement){
	var parent = targetElement.parentNode;
	if(parent.lastChild == targetElement){
		parent.appendChild(newElement);
	}else{
		parnet.insertBefore(newElement,targetElement.nextSibling);
	}
}

Ajax

对页面的请求以异步方式发送到服务器。服务器不会用整个页面来响应请求,他会在后台处理请求,于此同时用户还能继续浏览页面并于页面交互。

XMLHttpRequest对象——Ajax的核心对象

这个对象充当着浏览器中的脚本与服务器之间的中间人的角色。以往的请求都是浏览器发出,而JavaScript通过这个对象可以自己发送请求,同时自己处理相应。

你可能感兴趣的:(javascript,前端)