Question

我正在使用jquery处理页面。我想更改html dom中的文本。但是，当我尝试这样做时，它会删除dom下的整个html代码。你可以在这里查看jsfiddle：

http://jsfiddle.net/msxpwr5p/

html标记

<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>

JSfile

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

我只想更改编辑个人资料文字。我不想删除我的按钮。我的代码怎么了？

我知道我已经在我的div中插入了一些h1，这是有意的。我想知道这种情况是否有任何解决方案？假设我创建了一个

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

在这种情况下，如果我想改变＆＃34;你好＆＃34;文本。我该怎么办？

Answer 1

在正确位置关闭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

Answer 2

您使用JQuery更改h1标记的文本，在您的HTML中，您的标记包含所有内容

<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>

您想要的是在Edit Profile之后关闭标题，因此请将其更改为：

<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>

Answer 3

试试这个

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

检查jsFiddle

处的输出

Answer 4

您可以尝试此操作（不对HTML代码进行任何更改）

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

JSFiddle

Answer 5

尝试这样的事情：

<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>

Answer 6

这可以通过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";
});

这里是小提琴： http://jsfiddle.net/msxpwr5p/3/

这绝对是一个脆弱的解决方案，如果你的标记改变，这可能很容易破解。

Answer 7

即使在评论部分已经说过，但我要记住，你不能改变结束标签的位置。在更改文本之前，您可以从DOM中分离元素：

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

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

小提琴：http://jsfiddle.net/msxpwr5p/4/

Jquery Text删除整个HTML

7 个答案: