Javascript html（）方法在（文档）内部工作。就绪，但不在外部

我在这里遇到了一个相当奇怪的问题，.html（）方法在内部（document）.ready，将文本框写入.anchor1，而在外部（document）.ready，.html（）方法尝试将“c”和“d”写入.anchor2（与锚点1几乎等价）却什么都不做。“a”被记录到控制台，尽管它与行“$（“.anchor2”）.html（“c”）；”在同一个“if”语句中。为什么会这样

相关HTML：

<div class="anchor1">y</div>
<div class="anchor2">z</div>

y
Z

和JavaScript：

$(document).ready(function(){

    $(".anchor1").html("<textarea></textarea>");

    $('#menu1').on("menuselect", function (event, ui) {
        var value1 = $("#menu1 option:selected").text();
        var value2 = $("#menu2 option:selected").text();
    });
    hourly1 = $(".amount").val()
});

value1 = "weekly earnings";
value2 = "annual salary";

function switch1() {
    value1 = $("#menu1 option:selected").text();;
}

function switch2() {
    value2 = $("#menu2 option:selected").text();
}
$(".anchor2").html("d");
if (((value1 == "weekly earnings") && (value2 == "annual salary")) || ((value2 == "weekly earnings") && (value1 == "annual salary"))) {
    $(".anchor2").html("c");
    console.log("a");
}

$（文档）.ready（函数（）{
$（“.anchor1”）.html（“”）；
$（'#menu1'）。打开（“menuselect”，函数（事件，用户界面）{
var value1=$（“#菜单1选项：选中”）.text（）；
var value2=$（“#菜单2选项：选中”）.text（）；
});
小时1=$（“.amount”）.val（）
});
value1=“周收入”；
value2=“年薪”；
函数开关1（）{
value1=$（“#菜单1选项：选定”）.text（）；；
}
函数开关2（）{
value2=$（“#菜单2选项：选定”）.text（）；
}
$（“.anchor2”）.html（“d”）；
如果（（value1==“周收入”）&&（value2==“年薪”）| |（（value2==“周收入”）&&（value1==“年薪”））{
$（“.anchor2”）.html（“c”）；
控制台日志（“a”）；
}

之所以会发生这种情况，是因为JavaScript在执行.anchor2”div时没有在DOM中呈现。 $（document）.ready确保DOM已就绪，然后执行回调中编写的代码。 如果您不想使用$（document）。准备好将所有js移动到页面底部

i、 e就在结尾的

“

标记之前。 在本例中，将呈现HTML和$（“.anchor2”）.HTML（“d”）；代码在DOM中查找.anchor2 div。因此，您可以向div添加innerHTML

---

希望这能解决您的问题。

发生这种情况是因为当您的JavaScript执行您的.anchor2”div时，它没有在DOM中呈现。 $（document）.ready确保DOM已就绪，然后执行回调中编写的代码。 如果您不想使用$（document）。准备好将所有js移动到页面底部

i、 e就在结尾的

“

标记之前。 在本例中，将呈现HTML和$（“.anchor2”）.HTML（“d”）；代码在DOM中查找.anchor2 div。因此，您可以向div添加innerHTML

希望这能解决您的问题。

console.log（“a”）

正在工作，因为它与jQuery无关。它也可以在普通JavaScript中工作

您应该在

$（document）.ready（）中编写与
$（“.anchor2”）
相关的代码，或者用JavaScript而不是jQuery编写代码，例如

document.getElementsByClassName("anchor2")[0].innerHTML = 'c'; //whatever you want

console.log（“a”）
正在工作，因为它与jQuery无关。它也可以在普通JavaScript中工作

您应该在
$（document）.ready（）中编写与
$（“.anchor2”）
相关的代码，或者用JavaScript而不是jQuery编写代码，例如

document.getElementsByClassName("anchor2")[0].innerHTML = 'c'; //whatever you want

这里没什么奇怪的。在加载DOM之前，您无法对其进行操作。请从switch1函数中删除一个分号（；），这里没有什么奇怪的。无法在加载DOM之前对其进行操作。如果将js代码放在其后面或后面，则从switch1函数中删除一个分号（；），然后它仍然可以工作。为什么？我不知道。@RNKushwaha-Ya这也适用于现代浏览器，但这将使您的HTML无效。我想我将把所有内容都放在$（document）中。就绪。我没有意识到DOM没有加载到该函数之外。如果将js代码放在后面或后面，它仍然可以工作。为什么？我不知道。@RNKushwaha-Ya这也适用于现代浏览器，但这将使您的HTML无效。我想我将把所有内容都放在$（document）中。就绪。我没有意识到DOM没有加载到该函数之外。