javascript - 如何在不破坏整个功能的情况下在 jquery .html() 函数中添加一个 div 对象

Question

我不确定如何提出这个问题，所以也许这就是为什么我找不到答案的原因，而且一般来说我对 javascript 非常陌生，但这里有:

我正在尝试使用 javascript 更改我的主 div 的内容，方法是能够单击更改它的“链接”。当我使用

在线查看时，我以为我找到了解决方案

$( "#but2" ).click(function() {
   $("#Main").html("fffffffffffgdfg");

然而，当我尝试将内容添加到 html("") 中时部分，如果它有 <div class=""></div>在它里面，它完全停止运作。如果它只是文本或程式化文本，它工作正常，但我希望能够一起更改内部，因为我使用程式化的 div 来创建一个有凝聚力的网页。我可以理解我所要求的事情是否以我要求的方式是不可能的，但是有没有办法做到这一点？

我正在做的一个例子

<div class="Main">content
   <div class="sub">sub content</div>
</div>

当相应的按钮被按下时，“子”内容将被 javascript 更改。

更简单地说:有一个主页，然后单击一个显示“博客”的按钮，然后博客条目就会显示出来(但是该博客中有 div 属性)，而不更改“主要”之外的内容。

如果我没有任何意义，我深表歉意。希望有人能帮忙!如果您需要更多信息，请告诉我。我非常渴望得到答案，而且我对 javascript 非常非常陌生。

编辑:
这里是实际使用的代码和我正在尝试做的大量示例。它最初只是 .html("wall of code")，但我也尝试了 append("wall of code")，并尝试使用 '' 而不是 ""

<script type="text/javascript">
$( document ).ready(function() {

    $( "#but1" ).click(function() {
      $("#Main").append('<div class="ddd"><h2>Sector Chimera</h2>
<img src="{image:Game 1}" width="{text:DivWidth}"><br><br>
<div class="din">
<b>Length:</b> Long = 20+ hours.<br>
<b>Game Type:</b> 3D/2D Persona-esque RPG.<br>
<b>Genre:</b> Sci-Fi/Thriller <br>
<b>Rating:</b> Aimed to be rated 16+ <br>
<b>Completion:</b> Currently being revamped.<br><br>
<b>Summary:</b> The City Chimera, a dream come true for any wayward souls, criminals, and terminally ill desperate for a solution to life's problems. Sign away your life in favor of ground breaking treatments, a paycheck, or just a roof over your head and warm food in your belly. But alas, nothing really comes free, and being a guinea pig has its very severe downsides. Afterall, you don't build a secret city to house experiments if you're up to good.<br><br>Take control of the new kid on the block and uncover the dark secrets that lie within the walls of Sector Chimera, along with a ragtag team of misfits and downtrodden heroes in the making... Should you choose it.</div>
</div>

<div class="ddd"><h2>Ventio Mortis</h2><img src="{image:Game 2}" width="{text:DivWidth}"><br><br>
<div class="din">
<b>Length:</b> Medium = 4-11 hours.<br>
<b>Game Type:</b> 2D Visual Novel.<br>
<b>Genre:</b> Horror/Otome <br>
<b>Rating:</b> Aimed to be rated 16+ <br>
<b>Completion:</b> 7%<br><br>
<b>Summary:</b> When bodies start surfacing on the streets of a normally quiet town, things start to get a little tense in the city – for both the residents above and below ground and the law. As a detective tails Hollowelle and her gang of undead misfits, she does her very best to avoid her way of life from crumbling beneath her. Add to her misfortunes betrayal from within her own family, a human detective on her case is the least of her worries.
</div>
</div>




<div class="ddd"><h2>Rise of Remix</h2><img src="{image:Game 3}" width="{text:DivWidth}"><br><br>
<div class="din">
<b>Length:</b> Long = 20+ hours.<br>
<b>Game Type:</b> 3D RPG.<br>
<b>Genre:</b> Sci-Fi/Action/Adventure <br>
<b>Rating:</b> Aimed to be rated 16+ <br>
<b>Completion:</b> 2%<br><br>
<b>Summary:</b> euismod tristique eros, vel mattis purus condimentum non. Nulla ullamcorper, tellus id lobortis ultricies, orci arcu luctus felis, in rhoncus magna odio et eros. Sed eros leo, mollis eu urna eget, varius tincidunt neque. Donec tempus faucibus turpis quis pellentesque. Aliquam sit amet ligula vestibulum, euismo facilisis porttitor. Nam a mattis nulla. Vestibulum consectetur sed arcu vel tristique. Aliquam rutrum, sapien a ultricies eleifend, ex sapien auctor lacus, ac condimentum lacus dolor ac mi.</div>
</div>


<div class="ddd"><h2>Betterflies</h2><img src="{image:Game 4}" width="{text:DivWidth}"><br><br>
<div class="din"><b>Length:</b> Short = 2-4 hours.<br>
<b>Game Type:</b> 2D Visual Novel.<br>
<b>Genre:</b> Otome Game <br>
<b>Rating:</b> Aimed to be rated 12+ <br>
<b>Completion:</b> 40%.<br><br>
<b>Summary:</b> Just when you thought your anxiety could be controlled, it just seems to control you again and again. After a particularly bad anxiety attack, you are sent to group therapy and forced to live in a rehabilitation center until your mental health improves. You are not alone, however, with a small group of soon-to-be friends (or more), and Dr. Sarah, your life long therapist, to help guide you on the way to better health, as long as you want it, of course. A support system is important, after all, in recovery.</div>
</div></div>')
});

    $( "#but2" ).click(function() {
      $("#Main").html("This is the updated text");
});

    $( "#but3" ).click(function() {
      $("#Main").html("This is the updated text");
});

    $( "#but4" ).click(function() {
      $("#Main").html("This is the updated text");
});

    $( "#but5" ).click(function() {
      $("#Main").html("This is the updated text");
});

    $( "#but6" ).click(function() {
      $("#Main").html("This is the updated text");
});

    $( "#but7" ).click(function() {
      $("#Main").html("This is the updated text");
});



});
</script>

以及我实际的 div，它们都位于“容器”中，而我想要更改的内容位于“d2”中

<div class="d2">
<div id="Main">
<div class="ddd"><h2>Sector Chimera</h2>
<img src="{image:Game 1}" width="{text:DivWidth}"><br><br>
<div class="din">content
</div></div></div>

Answer 1

听起来您想要“单页应用”之类的东西。在顶部有按钮或某些导航栏/标题的地方，以及根据用户单击的按钮而变化的主体。我没有做

$("#Main").html("fffffffffffgdfg"); 

我会创建一个单独的 .html 文件，其中包含将被动态加载的标记。这是更好的，因为它更“面向 future ”，如果博客变得很长，您不希望将所有标记作为 JavaScript 字符串传递。我会将上面的行更改为:

function load(name) {

  // Build path to file
  var path = name + '.html';

  // Load the inner html from that file into the div with id='content'
  $('#content').load(path);
}

在您的 index.html 中，我将执行以下操作:

<!-- These buttons will stay at the top like a header -->
<div>

  <!-- Upon being clicked, they will pass their names to the load function -->
  <button name='contact'onclick='load(name)'>Contact</a>
  <button name='blog' onclick='load(name)'>Blog</a>
</div>

<!-- This will be the div that changes -->
<div id='content'></div>

现在，您所要做的就是创建文件:

contact.html
blog.html

您将能够单击按钮，内部 HTML 将发生变化