JS把内容动态插入到DIV的实现方法

最新推荐文章于 2022-08-02 10:02:48 发布

weixin_30270561

最新推荐文章于 2022-08-02 10:02:48 发布

阅读量435

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/labc/articles/5954723.html

版权

JavaScript：

document.getElementById("myId").setAttribute("href","www.xxx.com"); 
document.getElementById("myId").href = "www.xxx.com";

JQuery:

$("#myId").attr("href","www.xxx.com");

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Testing</title>
</head>
<script type="text/javascript" src="example.js">
</script>
<body>
<div id="testdiv">
</div>
</body>
</html>

example.js

window.onload = function() {
 var testdiv = document.getElementById("testdiv");
 testdiv.innerHTML="<p>I inserted <em>this</em> content.</p>";
}

另一种方法

window.onload = function() {
 var para = document.createElement("p");
 var txt1 = document.createTextNode("I inserted ");
 var emphasis = document.createElement("em");
 var txt2 = document.createTextNode("this");
 var txt3 = document.createTextNode(" content.");
 para.appendChild(txt1);
 emphasis.appendChild(txt2);
 para.appendChild(emphasis);
 para.appendChild(txt3);
 var testdiv = document.getElementById("testdiv");
 testdiv.appendChild(para);
}

这与在DIV内动态载入另一个页面非常相似！

补充把元素插入到指定元素的前边：

document.getElementById("msgplan").innerHTML=newmsg;
改成

document.getElementById("msgplan").innerHTML += newmsg;
或
document.getElementById("msgplan").innerHTML = newmsg + document.getElementById("msgplan").innerHTML;
一个是新消息放在前面，一个是新消息放后面

另一种方法：

<script type="text/javascript">
    var authorized = localStorage.getItem('authorized');
    if( authorized != 1 ){
        var welcome_or_login_div = document.getElementById('welcome_or_login_div');
        var contact_customer_service_separate = document.getElementById('contact_customer_service_separate');
        
        var login_link = document.createElement("a");
        login_link.href="/user/login/";
        login_link.innerHTML=' 登录 ';
        
        var glyphicon_vertical = document.createElement('span');
        glyphicon_vertical.setAttribute('class', 'glyphicon glyphicon-option-vertical');
        glyphicon_vertical.setAttribute('aria-hidden','true');

        
        var register_link = document.createElement("a");
        register_link.href="/user/register/";
        register_link.innerHTML=' 注册 ';
        
        welcome_or_login_div.insertBefore(login_link, contact_customer_service_separate);
        welcome_or_login_div.insertBefore(glyphicon_vertical, contact_customer_service_separate);
        welcome_or_login_div.insertBefore(register_link, contact_customer_service_separate);
    }
    else{
        var welcome_or_login_div = document.getElementById('welcome_or_login_div');
        var contact_customer_service_separate = document.getElementById('contact_customer_service_separate');
        var welcome_message = document.createElement('span');
        welcome_message.innerHTML = '你好 '+localStorage.user_name+'，';
        welcome_or_login_div.insertBefore(welcome_message, contact_customer_service_separate);
        
        var logout_link = document.createElement("a");
        logout_link.href="/user/logout/";
        logout_link.innerHTML='退出';
        welcome_or_login_div.insertBefore(logout_link, contact_customer_service_separate);
    }
</script>

转载于:https://www.cnblogs.com/labc/articles/5954723.html

weixin_30270561

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS把内容动态插入到DIV的实现方法

JavaScript：document.getElementById("myId").setAttribute("href","www.xxx.com"); document.getElementById("myId").href = "www.xxx.com"; JQuery:$("#myId").attr("href","www.xxx.com"); ...
复制链接

扫一扫