如何在js文件中写入html代码（即原有html内容在js中但项目中不存在html文件）,像是js动态生成html文件。_安全

建立一个js，例如topjs，里面内容为
documentwrite('html代码（一行一个吧）');
documentwrite('html代码（一行一个吧）');
documentwrite('html代码（一行一个吧）');
建立html，例如tophtml,在body里写
<script type="text/javascript" src="topjs"></script>

1、新建一个HTML文件，保存为testhtml，用于编写代码实现拖放功能。

2、在testhtml添加一个div标签，并且给它一个id，用于下面编写样式。

3、通过div的id , 给div定义CSS样式，例如，把div定义为一个带边框的长方形。下面将实现将拖放在这个长方形中。

4、在div的下面定义一张被拖放，并设置该的属性为允许被拖放。

5、在被拖放的上加上一个ondragstart事件，即被拖动时触发这个事件。再给事件一个函数，用于拖动时，把保存在一个变量中。

6、运行代码，在浏览器中查看结果：至此，完成了使用JS实现拖放到div中的功能。

1、首先打开hbuilder软件新建一个html文件，在html页面上创建一个点击的button按钮：

2、然后为button添加点击时创建一个新的div事件。使用“documentcreateElement()”创建一个新的div，接着使用innerHTML对新建的div设置内容，最后把div放到body显示：

3、在html里为button按钮添加宇哥点击创建div的事件，完成之后代码就写好了，接下来需要看看效果：

4、保存好html文件后使用浏览器打开，此时还没有创建div：

5、最后点击button按钮，会执行脚本创建div的事件，新的div就创建好了，顺利实现了给HTML标签添加了内容。以上就是用JS给HTML标签添加内容的 *** 作：

利用JavaScript动态添加Div的方式有很多，一下是个比较常用的。

一、在一个Div前添加Div

二、使用js动态创建div

扩展资料：

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

是一种解释性脚本语言（代码不进行预编译）。

主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>RunJS</title>
    <script id="jquery_180" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-180minjs"></script>
    <script type="text/javascript">
        function c(a, b) {
            var ap = aparents("#1option");
            if (!b) {
                aptoggle();
            } else {
                apfind(b)toggle();
            }
        };
        $(function() {
            $(":button[value='添加']")click(function() {
                $("body")append($("textarea")val());
            });
        });
    </script>
</head>
<body>
    <input type="button" value="添加" />
    <textarea style="display:none;">
        <div id="1option" style="width:800px;height:170px;display:block">
            <div id="first">
                <div style="width:800px;height:20px;background-color:#EDEDED;">
                    <div id="legend" style="float:left">c</div>
                    <div class="fa fa-times" id="close12" onclick="c($(this));" style="float: right;cursor:pointer;">x</div>
                    <div class="fa fa-arrows-alt" id="d1toBig" onclick="c($(this),'#seconddiv');" style="float:right;margin-right:5px">s</div>
                    <div class="fa fa-wikipedia-w" id="d1To7day" style="float:right;margin-right:5px;cursor:pointer"></div>
                </div>
                <div id="container" style="width:800px;height:150px;background-color:#FFFFFF"></div>
            </div>
            <div id="seconddiv" style="height:900px;width:1580px;z-index: 9999; display:none; position: fixed; left: 10px; top: 15px;background-color: #2E8B57">
                <div class="fa fa-times" id="close12" onclick="c($(this),'#seconddiv');" style="float: right;margin-right:40px;margin-top:7px;cursor:pointer;"></div>
                <div id="newdiv1" style="width:1500px;height:700px;margin-left:40px;margin-top:30px"></div>
            </div>
        </div>
    </textarea>
</body>
</html>

感觉是HTML代码没有写到对应区域的innerHTML

<html>
<head>
<script type="text/javascript">
function setInnerHTML()
{
myboxhtml="<a href=#>mylink</a></p><hr>";
documentgetElementById("mybox")innerHTML=myboxhtml;
}
</script>
</head>
<body onload="setInnerHTML()">
<div id=mybox></div>
</html>

更多信息 ><style>
box1{
    width: 600px;
    height:300px;
    border: 6px solid #bb0000;

}
h1{
    border-bottom: 1px solid green;
}

</style>

<div class="box1">
    点击改变内容
</div>
<script src=">

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/13089916.html

如何在js文件中写入html代码（即原有html内容在js中但项目中不存在html文件）,像是js动态生成html文件。

发表评论

评论列表（0条）