不显示DIV的HTML

Question

我有一些带有一些DIV和javascripts的HTML代码：

<div class="blabla">
anything here
</div>

<script>setText('<p>MY TEXT 1</p>');</script>

<div id="textcomeshere"></div>

<script>setText('<p>MY TEXT 2</p>');</script>

这是我的setText函数：

function setText(txt) {
  console.log(txt);
  $("#textcomeshere").html(txt);
}

问题是，div内部什么也没有出现。

我还尝试将$( document ).ready()添加到该函数中，但在加载文档之前调用了第一个setText，但它无法工作。如果我在不使用document.ready的情况下使用它，那么在#textcomeshere DIV存在之前就会调用第一个setText，因此它无法工作。

我需要保持代码中的顺序(因为有更多的条件)，所以我不能将setText调用移到其他地方，也不能将textcomeshere DIV，因为它在那里有他的位置。

有什么解决办法吗？

Answer 1

唯一对我有帮助的是，在代码开始时，在textcomeshere和jquery函数之后移动所有setText调用。这样，如果我需要在显示其他div之前调用setText，那么它的工作方式并不是理想的解决方案。

Answer 2

看看这个片段：

​

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    <script type="text/javascript">
        function setText(txt) {
            console.log(txt);
            $("#textcomeshere").html(txt);
        }
    </script>
</head>
<body>
    <div class="blabla">
        anything here
    </div>

    <script>setText('<p>MY TEXT 1</p>');</script>

    <div id="textcomeshere"></div>

    <script>setText('<p>MY TEXT 2</p>');</script>
</body>
</html>

​

另外，<body>中的第一个settext()调用不能更改<div>内容，因为<div id="textcomeshere">是在它之后定义的。以DOM(Document )定义的方式执行html文档正文中的<script>。

Answer 3

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="assets/js/jquery/jquery-3.5.1.min.js"></script>
    <title>project 11</title>
</head>

<body>
    <div class="blabla">
        anything here
    </div>
    <script>
        $(document).ready(function() {
            setText("p", 'MY TEXT 1');
        });
    </script>
    <div id="textcomeshere"></div>
    <script>
        $(document).ready(function() {
            setText("p", 'MY TEXT 2');
        });
    </script>

    <script src="assets/js/text.js"></script>
    <!-- main javaScript file-->
    <script src="assets/js/main.js"></script>
</body>

</html>

Javascript文件

  /**
 * 
 * text.js
 */

    let myDiv = document.getElementById("textcomeshere"),
        myTag, myTextNode;
    
    function setText(tag, txt) {
        myTag = document.createElement(tag); // create tag
        console.log(myTag); // result <p></p> in case tag was p
        myTextNode = document.createTextNode(txt); // create text
        console.log(myTextNode); // result will be text 
        myTag.appendChild(myTextNode) // appending the textNode to the tag
        myDiv.appendChild(myTag); // appending the tag with it's text content to the div
        console.log(myDiv); // div now has p tag and text inside of it
    }

​

​