logo标签列表

Jquery文本删除整个HTML

javascriptjqueryhtmlcss
8
我正在使用jQuery制作一个页面。我想要更改HTML DOM中的文本。但是当我尝试这样做时，它会删除DOM下的整个HTML代码。 您可以在此处检查jsfiddle：

http://jsfiddle.net/msxpwr5p/

标记 
<div class="container">
    <h1 class="page-header">Edit Profile
        <div class="broadcast">
            <button id="button1" class="btn btn-success"><i class="icon-bullhorn">   </i>button1</button>
       </div>
       <div class="broadcast">
           <button id="button2" class="btn btn-success"><i class="icon-bullhorn"></i>button2</button>
       </div>
    </h1>
</div>

JS文件

$("#button2").on('click', function(e){
$(".page-header").text("another text");
});

我只想更改“编辑个人资料”文本，不想删除我的按钮。我的代码有什么问题吗？
我知道我已经将一些
插入到我的

中，这是故意的。我想知道是否有任何解决这种情况的方法？假设我创建一个

。
<div id="hello">
    Hello
    <a href=#></a>
    <button>text</button>
<div>

在这种情况下，如果我想更改“hello”文本，我该怎么做？

把你的div移到h1的外面：http://jsfiddle.net/j08691/msxpwr5p/1/ - j08691
是的，因为你使用了 h1 作为容器，这是不应该的。 - Rumplin
8
永远不要将div放在h1标签内。 - Sergiu Paraschiv
我又编辑了我的问题，请您看一下。 - user3957766
7个回答
4

试试这个

$("#button2").on('click', function(e){
   $('h1').contents().first()[0].textContent='another Title';
});

请在jsFiddle上查看输出结果。

感谢您的专业解决方案。但作为一个初学者，我觉得在jQuery中，text()和html()没有什么有用的区别。text()应该只查找所选DOM中的文本并保留其他HTML。 - user3957766
3

请在正确的位置关闭你的h1标签：

<div class="container">
    <h1 class="page-header">Edit Profile</h1>
  <div class="broadcast">
  <button id="createchannel" class="btn btn-success"><i class="icon-bullhorn"></i>Create Channel</button>
  </div>
  <div class="broadcast">
  <button id="listchannel" class="btn btn-success"><i class="icon-bullhorn"></i>List Channel</button>
  </div>
</div>

你的h1标签在整个div内几乎都是开放状态。 JSFIDDLE
3

您正在使用 JQuery 更改 h1 标签的文本，在您的 HTML 中，您的 <head> 标签将所有内容包含起来。

<div class="container">
  *Starts here*<h1 class="page-header">Edit Profile
  <div class="broadcast">
  <button id="button1" class="btn btn-success"><i class="icon-bullhorn"></i>button1</button>
  </div>
  <div class="broadcast">
  <button id="button2" class="btn btn-success"><i class="icon-bullhorn"></i>button2</button>
  </div>
  </h1>*ends here*
</div>

您想要的是在“编辑个人资料”之后关闭标题，因此请将代码更改为以下内容：
<div class="container">
  <h1 class="page-header">Edit Profile</h1>
  <div class="broadcast">
  <button id="button1" class="btn btn-success"><i class="icon-bullhorn"></i>button1</button>
  </div>
  <div class="broadcast">
  <button id="button2" class="btn btn-success"><i class="icon-bullhorn"></i>button2</button>
  </div>
</div>
在我的情况下，我无法关闭它。我必须保留标记的原样。有没有办法仅捕获文本并在jQuery中更改它？我已经编辑了我的问题以便更好地解释，请看一下。 - user3957766
是的，这是可能的。我已经在这里放置了答案，您可以在jsFiddle上检查代码。 - user3524542
1

您可以尝试这个（不需要更改您的HTML代码）

$("#createchannel").on('click', function(e){
    var text = $(".page-header")[0].firstChild;
    text.textContent = "another text";
});

JSFiddle

{{链接1：JSFiddle}}

1
尝试像这样：

尝试像这样：

<div class="container">
  <h1 class="page-header"><span id='under_header'>Edit Profile<span>
  <div class="broadcast">
  <button id="button1" class="btn btn-success"><i class="icon-bullhorn"></i>button1</button>
  </div>
  <div class="broadcast">
  <button id="button2" class="btn btn-success"><i class="icon-bullhorn"></i>button2</button>
  </div>
  </h1>
</div>
您的回答已出现在低质量帖子队列中。请添加解释说明如何回答OP的问题。 - Justin Wood
0

这可以通过JavaScript实现，使用您当前的标记也是可能的，但我建议简单地关闭您的H1标签并相应地调整按钮的样式。

<div class="container">
  <h1 class="page-header">Edit Profile</h1>
  <div class="broadcast">
  <button id="button1" class="btn btn-success"><i class="icon-bullhorn"></i>button1</button>
  </div>
  <div class="broadcast">
  <button id="button2" class="btn btn-success"><i class="icon-bullhorn"></i>button2</button>
  </div>
</div>

你可以使用以下脚本，利用你当前的标记语言来完成它：
$("#createchannel").on('click', function(e){
  $(".page-header")[0].firstChild.data = "Create Channel";
});

这是 JSFiddle 的链接： http://jsfiddle.net/msxpwr5p/3/

然而，这绝对是一个脆弱的解决方案，如果您的标记更改了，它很容易就会出问题。

我想知道在当前的标记中是否可以使用jQuery？我已经编辑了我的问题以便更好地理解，请看一下。 - user3957766
好的，我已经更新了我的答案，使用您现有的标记。 - Jeff
0

尽管在评论部分已经提到过，但我会记住你不能更改闭合标签的位置。在更改文本之前，您可以将元素从DOM中分离出来：

$("#createchannel").on('click', function(e){
    var $child = $(".page-header").children().detach();
    $(".page-header").text("Create Channel").append($child);
});

将它们分离将允许您在从DOM中移除它们的同时保留对元素的引用。当使用.text()时，它会清空目标DOM元素并更改其文本。因此，在更改文本后，您可以附加已分离的元素。

Fiddle: http://jsfiddle.net/msxpwr5p/4/

很不错的技巧。感谢您的建议。但我认为jQuery应该关注这个问题。作为最基本的常识，任何人都可以期望text()函数会查找文本并对其产生影响。而html()函数可以更改所选dom上的整个html。html和text之间的主要区别应该是这个。但现在text和html函数除了数据类型之外没有太大的区别。一个将代码视为代码，另一个将代码视为字符串。作为一名专业人士，您不认为jQuery应该解决这个问题吗？@karl-Andre Gagnon - user3957766
@Shobdo 在理想的世界中，是的，但在实际的世界中，这是不可能的，至少现在不行。有太多的变量来做你想要的事情。在这种特定情况下，这个解决方案可以工作，但如果你在文本之间有一个内联节点会发生什么呢？例如：<p>This line <span>will be</span> weird.</p> 那么很难知道何时停止，对吧？使用这种技术作为参数 "Like Yoda, I" 的结果将是：<p>Like Yoda, I <span>will be</span></p>。JavaScript 有一些限制。使用 text 的主要优点是它可以编码为 HTML。 - Karl-André Gagnon
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接