javascript - 改变元素本身的text值,但是不改变其内层元素的值
黄舟
黄舟 2017-04-10 17:04:53
[JavaScript讨论组]

直接附上代码

改变本层,不改变里面的,可以使用jq

例如:改变我,但不改变 #p1内的其他元素的值 (内层元素数量,层数不确定)

content content

例如这个 就有很多层了

content content

2 1

3

2 55555

3

TODO content

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(6)
阿神

最好和规范的方式是:把文字放到相应标签里面,处理快捷效率也高。

阿神

先转成字符串,然后正则,再转回去。这样有点麻烦。
还是建议写规范点,不然后续修改会很麻烦

黄舟

如果你一定要满足这个变态要求的话,只能每次更改时先把p1内的所有内容取出,然后用正则去匹配替换掉需要替换的内容。。
最简单的方法就是用个span标签包裹内容,每次替换span标签内的内容就OK了。

高洛峰

先明确一个问题:文本只会位于一处,还是分散在各个元素之间?

是这种:

<p>
    blablabla
    <p>...</p>
    <p>...</p>
</p>

还是这种?

<p>
    blablabla
    <p>...</p>
    blablabla
    <p>...</p>
</p>

来了!

<p id="p1">
    <p>...</p>
    blablabla
    <p>...</p>
</p>
<button id="btn">修改</button>
<script type="text/javascript">
    document.getElementById('btn').onclick = function() {
        var p1 = document.getElementById('p1');
        var nodes = p1.childNodes;
        var node;
        for (var i = 0; i < nodes.length; i++) {
            node = nodes[i];
            if (node && node.nodeType === 3 && node.nodeValue.trim().length > 0) {
                node.nodeValue = 'Change me!';
                break;
            }
        }
    };
</script>
PHPz

纯文本也是节点 要用原生js取 而且不好用选择器

伊谢尔伦

文字本身也是一个父节点.childNodes数组中的节点。
在现代浏览器中,访问节点本身.textContent属性即可。
在老浏览器里我忘了,查一下。再不济用.replaceChild(document.createTextNode,)总是可以的。

<p>
    只换这里
    <input value="不换这里,证据是编辑完这个框里的文字后不会受影响">
    <button onclick="this.parentNode.childNodes[0].textContent='换成这个';">
        点击更换(先进浏览器)
    </button>
    <button onclick="this.parentNode.replaceChild(document.createTextNode('换成这个'),this.parentNode.childNodes[0]);">
        老版本IE点这个(兼容先进浏览器)
    </button>
</p>

说这样不行的,能给出你的代码吗?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号