CODEWITHSUNDEEP
javascripthtmljquery
Darksymphony
Darksymphony

Reputation: 2713

HTML not displaying for DIV

I have HTML code with some DIV's and javascripts:

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

This is my setText function:

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

The problem is, nothing appears inside div.

I also tried to add $( document ).ready() to that function, but then the first setText is called before document load and it doesn't work. If I use it without document.ready, the first setText is called before the #textcomeshere DIV exists, so it doesn't work.

I need to keep the order in code as it is (as there are more conditions), so I can't move the setText calls to other place, neither the textcomeshere DIV, as it has his position there.

Is there any solution for this?

Upvotes: 1

Views: 770

Answers (5)

Ahmad Dalao
Ahmad Dalao

Reputation: 2056

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 file

  /**
 * 
 * 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
    }

result

Upvotes: 1

Darksymphony
Darksymphony

Reputation: 2713

The only thing what helped me, was to move all setText calls after the textcomeshere div and the jquery function in the beginning of the code. This way it works, however not an ideal solution, if I need to call setText before showing some other divs etc.

Upvotes: 0

Sarthak Kuchhal
Sarthak Kuchhal

Reputation: 360

js file & html file.

document.getElementById("textcomeshere").innerHTML = "update text here";
<div class="blabla">
anything here
</div>

<div id="textcomeshere"></div>
Try This. It will work

Upvotes: 0

Prakalp varshney
Prakalp varshney

Reputation: 43

i think calling your JS file in head just after jQuery CDN will resolve this problem...

Upvotes: 0

gpl
gpl

Reputation: 1470

Check out this snippet:

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

Also your first settext() call inside <body> can't change <div> contents because <div id="textcomeshere"> is defined after it. <script> inside the body of html document executed in the manner they are defined in DOM(Document Object Model).

Upvotes: 1

Related Questions