使用js向网页中写入html内容

JavaScript042

使用js向网页中写入html内容,第1张

js可以向网页中写入html内容，方法是调用write方法向document的节点中写入html元素 以下展示两个实例 1.在网页上写入一个标题为hello的元素 效果如图： 2.在网页上写入一个九九乘法表 在js中可以使用上面的 <h1>hello </h1>这样的开始标签和闭合标签在一起的标签写法，也可以将开始标签和闭合标签分开来写，例如本例。 本例的逻辑是用table标签建立一个表，然后用for循环分别计算九九乘法的结果，在写入结果的前后用tr标签形成一行，计算结果的时候用td标签形成一列 效果图： 通过chrome浏览器右键检查，可以看到的确写入了一个九九乘法表的table到网页中 注意： 在进行字符串拼接的时候如果没有处理好，会出现 SyntaxError: missing ) after argument list 的错误，需要谨慎对待，具体问题具体对待，解决方法可以参考下面的资料或者自行google 1. SyntaxError: missing ) after argument list2. js中出现missing ) after argument list3. JavaScript: SyntaxError: missing ) after argument list [closed]

首先你要确认你的是js码，只有js代码才能被调用。将写好的js代码复制到txt文件中，另存为.js文件，保存在你的网站目录下。我保存在桌面上。（注在网页上调用一定要保存在网页上）保存好了之后，我的桌面就有一个新建.js的介绍文件，现在看看效果吧。随便新建一个网页，在<body></body>（注我演示的没有body，是最简单的网页）之间插入<scriptlanguage="javascript"src="js文件地址"></script>，我的是放在桌面上的，所以地址是下面的这个保存为html文件之后，打开来看看效果吧。如上图所示，在网页的源文件里面，显示的不是<inputtype=buttonname="Submit1"value="郭强"size=10class=s02style="background-color:rgb（235，207，22）">而是这段代码转换成js后js文件所在的位置。

给你个实例，就是通过发送访问请求，而获得请求返回的数据。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-type" content="text/html charset=utf-8">

<title>远程网页源代码读取</title>

<style type="text/css">

/* 页面字体样式 */

body, td, input, textarea {

    font-family:Arial

    font-size:12px

}

</style>

<script type="text/javascript">

//用于创建XMLHttpRequest对象

function createXmlHttp() {

    //根据window.XMLHttpRequest对象是否存在使用不同的创建方式

    if (window.XMLHttpRequest) {

       xmlHttp = new XMLHttpRequest()                  //FireFox、Opera等浏览器支持的创建方式

    } else {

       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")//IE浏览器支持的创建方式

    }

}

//直接通过XMLHttpRequest对象获取远程网页源代码

function getSource() {

    var url = document.getElementById("url").value             //获取目标地址信息

    //地址为空时提示用户输入

    if (url == "") {

        alert("请输入网页地址。")

        return

    }

    document.getElementById("source").value = "正在加载……"   //提示正在加载

    createXmlHttp()                                            //创建XMLHttpRequest对象

    xmlHttp.onreadystatechange = writeSource                   //设置回调函数

    xmlHttp.open("GET", url, true)

    xmlHttp.send(null)

}

//将远程网页源代码写入页面文字区域

function writeSource() {

    if (xmlHttp.readyState == 4) {

        document.getElementById("source").value = xmlHttp.responseText

    }

}

</script>

</head>

<body>

<h1>远程网页源代码读取</h1>

<div>

    地址：<input type="text" id="url">

    <input type="button" onclick="getSource()" value="获取源码">

</div>

<textarea rows="10" cols="80" id="source"></textarea>

</body>

</html>