Question

尝试将html代码插入到运行的html中，然后在处理后删除所述代码。这是我写的，不明白为什么它不起作用。引号不应该作为字符串运行到div div中吗？

<script src="https://d3js.org/d3.v4.min.js"></script>
<div style="float:left; padding:4px;">Lorem ipsum<br>dolor sit amet</div>
<div style="overflow:hidden;" id="mySvg">
	<svg ></svg>
</div>

var membrane =“bubble”;

<div><span id="evolutionUpgrades"></span></div>

这应该在evolution变量等于或大于1时触发，并运行两个if函数，然后将代码复制粘贴到html中。

不幸的是，似乎我的javascript忽略了''作为字符串并试图按原样运行代码。

如何使它只是插入，以便if语句为true时，它会创建一个按钮，而不是在单击时执行该函数，并且在运行时该函数变得不真实，然后被删除？

我使用错误的旗帜吗？错误的标点符号？我做错了什么或不知道？请帮忙解决这个问题。请详细说明您的答案，以便我可以从中学习。只是修改我的代码而不解释并不能真正帮助我。

我不介意人们修复我的语法错误。但请不要更改代码。我需要看到破碎和固定之间的差异才能学习。特别是当你打破代码。我的代码是正确的，除了Jason W的修复。

Answer 1

字符串中的html很好，但是你得到了一个语法错误，因为你把字符串放到多行上。假设您忘记关闭字符串和分号，Javascript在换行符上进行分析 - 多么周到:)

要解决这个问题，最简单的方法是添加w = randn(10,1)以转义换行符（应适用于所有浏览器）或使用反引号（`）而不是单引号（但仅限ES6支持才可以为您的应用程序）。

% Bias and Variance

sum_bias=sum((y_test - mean(x_test*w_train)).^2);
Bias = sum_bias/test_l;

sum_var=sum((mean(x_test*w_train)- x_test*w_train).^2);
Variance = sum_var/test_l;

*在第一个结束\标记后注意“\”以转义HTML中的换行符

Answer 2

添加到@Jason所说的内容。

你的evolution变量在哪里？如果没有if变量，嵌套的evolution将无法使用。
考虑使用更多modern way向按钮添加点击事件。
我也可能将完整的代码包装在immediately invoked function expression中并调用该函数。

只是我的两分钱。

Answer 3

不是以这种方式插入HTML，而是将可选HTML包含在主HTML文件中，然后通过添加/删除hide等类来打开或关闭它。

<div>
  <span id="evolutionUpgrades" class="hide">
    <p style="color:blue" title="Choose your evolution carefully.">Evolutions</p>
    <p title="Your first evolution.  Double wall bubbles were the first evolution of cells.">
     <button type="button" onclick="doublebubble()"><b>Double Bubble</b></button>
    </p>
  </span>
</div>

var membrane = "bubble";

function evolutionUpgrade(){
  if (membrane == "bubble") {
    if (evolution >= 1) 
      document.getElementById("evolutionUpgrades").classList.remove("hide");
  }
}

function doublebubble() {
  membrane = "doublebubble";
  document.getElementById('membrane').innerHTML = "Double Bubble";
}

.hide { display: none; }

通常，最好避免将HTML视为插入DOM或从DOM中删除的大字符串。正如您所发现的那样，您会遇到引用和换行问题。它还使您的代码更难阅读。让HTML为HTML，JS为JS。

Answer 4

如果您使用的是jQuery，还可以使用.append（）方法

$('#evolutionUpgrades').append(`
    <p style="color:blue" title="Choose your evolution carefully.">Evolutions</p>
    <p title="Your first evolution.  Double wall bubbles were the first evolution of cells."><button type="button" onclick="doublebubble()"><b>Double Bubble</b></button></p>
`)

如何在不重新加载页面的情况下将html代码插入到加载的html页面中？

4 个答案: