js内嵌html代码,js内嵌网页

发布时间：2023-12-08

js内嵌html代码,js内嵌网页

更新：2022-11-17 23:04

本文目录一览：

  1. 如何在 JS 中嵌入 HTML 代码
  2. JS如何在页面中插入HTML代码
  3. JavaScript中嵌套HTML代码
  4. 怎么把调用的js代码放在html中
  5. 为什么JavaScript要嵌入html？
  6. 如何用js动态写入html代码

如何在 JS 中嵌入 HTML 代码

不能这么写的，两者的执行位置不一样，JSP在服务器，JS在客户端。 JSP代码最后都是要编译成Servlet在服务端执行的，然后把HTML格式的执行结果输出到客户端，而JavaScript是要发送到客户端解释执行的，两者的执行一个在前，一个在后，没法嵌套，即： JSP-Servlet(在服务器端执行)-HTML(包括JS)-客户端(解释执行JS并渲染HTML) 不过JSP代码倒是可以嵌套在JavaScript中，因为在将执行结果(HTML)返回给用户之前，JSP会在服务器端执行，而嵌套在JavaScript中的JSP代码就会替换为执行结果，如：

function test(){
    var i = <%=request.getLocalPort()%>;
    alert(i);
}

如果实在要写的话可以通过JSP的内置对象out来把JavaScript代码输出到客户端，但这样还是走的JSP-Servlet-HTML的流程，等于多走了一步，还不如直接写在HTML里。 下面给出一个例子：

<%
    out.println("<script type='text/javascript'>alert('Hello')</script>");
%>

JS如何在页面中插入HTML代码

在JS中插入短的HTML代码，可以通过先使用一个函数来包着你要添加的HTML代码，然后在使用innerHTML这个函数提取就行。在你的HTML中添加一个事件，然后调用这个函数即可。具体示例如下：

<head>
<script>
function insert() {
    var insertText = "<table><tr><td>any thing</td></tr></table>";
    document.getElementById("insert").innerHTML = insertText;
}
</script>
</head>
<body>
<button onclick="insert()">Insert</button>
<div id="insert"></div>
</body>
</html>

JavaScript中嵌套HTML代码

通过嵌套iframe实现嵌套HTML页面：

$(function () {
    document.getElementById("ifm").src = ""; // Url地址
    $("#ifm").load(function () {
        var h = document.body.clientHeight;
        var w = document.body.clientWidth;
        document.getElementById("ifm").height = h + "px";
        document.getElementById("ifm").width = w + "px";
    });
});

<body style="overflow-y:hidden;overflow-x:hidden">
<div id="pageone">
<iframe name="ifm" id="ifm" scrolling="yes" style="background-color: transparent;" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</div>
</body>

怎么把调用的js代码放在html中

在HTML中加入JavaScript脚本：

<script language="JavaScript">
    alert("你好！");
</script>

也可以调用外部JS文件：

<script language="JavaScript" src="test.js"></script>

test.js文件内容如下：

alert("这是被调用的语句。")

此外，还可以在浏览器地址栏中直接执行JavaScript脚本，例如：

javascript:alert(200*75)

为什么JavaScript要嵌入html？

JavaScript作为客户端的脚本语言，主要的用途就是帮助HTML处理部分交互逻辑。 根据JavaScript在HTML中加载方式的不同，嵌入方式可以分为以下几种：

1. 内部引用

<head>
<script type="text/javascript">
    document.write("Hello world!");
</script>
</head>

2. 外部引用

<head>
<script type="text/javascript" src="路径"></script>
</head>

3. 内联引用

<input type="button" value="" onclick="alert('你内联引用的方式调用了JavaScript代码');">

如何用js动态写入html代码

所谓动态写入方法就是源文件代码中原来没有内容或者需要重新改变此处的要显示的文字或内容，需要用JavaScript代码来实现。动态写入是一种很常见常用的方法。

1. 用innerHTML写入HTML代码：

<div id="abc"></div>
<script>
document.getElementById("abc").innerHTML = "要写入的文字或内容";
</script>

2. appendChild() 方法：

<ul id="myList">
    <li>Coffee</li>
    <li>Tea</li>
</ul>
<button onclick="myFunction()">点击向列表添加项目</button>
<script>
function myFunction() {
    var node = document.createElement("LI");
    var textnode = document.createTextNode("Water");
    node.appendChild(textnode);
    document.getElementById("myList").appendChild(node);
}
</script>
推荐文章