Execute javascript line on a specific element

Question

I have this code example

<div id='1'>
<div class='2'>
<script type='text/javascript' src='..'</script>
</div>
</div>

What I want is to put the script line in bottom of the body and target the second class to make it run normal as if it was inside of it. I already saw a site where they managed to make it.

Edit The above code was just an example, not the actual code. I found the solution by looking at DOM innerHTML in w3schools.

The position of the script tag in the body specifies when it will be loaded and executed, not what element it will affect. Therefore, this post does not really make any sense. — sjahan, Dec 20 '17 at 14:44
Possible duplicate of [How do I change the text of a span element in JavaScript](https://stackoverflow.com/questions/1358810/how-do-i-change-the-text-of-a-span-element-in-javascript) — MEE, Dec 20 '17 at 14:47
@T.J.Crowder That's interesting! I don't think it will help OP, but I didn't know `document.write` writes at the location of the script tag. Anyway, that feels quite a dirty way to do (instead of using IDs to select properly and accurately elements). — sjahan, Dec 20 '17 at 14:47
@sjahan: Very much so, there's virtually no place for that use of `document.write` in modern pages. :-) — T.J. Crowder, Dec 20 '17 at 14:49
It's too bad this question has been so downvoted. It's a perfectly valid and quite useful question to ask. Could have been a bit clearer, I suppose, but... — T.J. Crowder, Dec 20 '17 at 15:02

score 3 · Answer 1 · answered Dec 20 '17 at 14:49

It sounds like you're talking about a script that uses document.write to output content synchronously to the parser when the script tag is encountered, e.g.:

.foo {
  border: 1px solid black;
}

<div class="foo">
<script>document.write("I'm in the div");</script>
</div>

The modern way to do that is to manipulate the DOM afterward by

Selecting the target element(s), and
Inserting/removing/modifying content

I'm going to use id="the-div" instead of id="1" and class="the-class" instead of class="2", because while it's possible to select your versions with CSS selectors, it's unnecessarily awkward (because they start with digits).

Here's an example selecting an element and modifying its content:

document.querySelector("#the-div .the-class").innerHTML = "I'm in the div";

.the-class {
  border: 1px solid black;
}

<div id='the-div'>
<div class='the-class'>
</div>
</div>

You manipulate elements via the DOM (directly, or with libraries and/or frameworks like jQuery, Knockout, React, Vue.js, etc.).

Scott Marcus · Answer 2 · 2017-12-20T15:59:50.327

The location of a <script> element that contains "loose" lines of JavaScript that are not contained by a function or class declaration will cause those lines to execute at the point in the DOMs parsing where they are encountered. This kind of linear scripting was used many years ago and was generally used to produce dynamic content at the right spots in the document with document.write().

That type of scripting lent itself to multiple scripts interspersed throughout the document and that made maintaining and debugging the page difficult. Instead, if you want your code to make changes to the document, it's generally best to have your script execute after the document's elements have been fully parsed.

There are two ways to have your script run at this point in time.

Place your script just before the closing body tag:

<!doctype html>
<html>
<head>
  <title></title>
</head>
<body>
  <div id='1'>
    <!-- Class names cannot start with a number. -->
    <div class='two'></div>
  </div>


  <!-- The simplest way to ensure your script runs after all the HTML content
       has been parsed is to place the script just before the closing body tag. -->
  <script>
    // Just have the script locate the element(s) you want to work with:
    var nestedDiv = document.querySelector(".two"); // Finds first element that has the "two" class
    nestedDiv.textContent = "I've been added dynamically!"; // Update the text of the element
  </script>
</body>
</html>

2. The browser will trigger the DOMContentLoaded event when all the elements that make up the document have been parsed into memory and you can set up a function to be automatically called when that event (or other events) happens.

<!doctype html>
<html>
<head>
  <title></title>
  
  <!-- If using events, the location of the script doesn't matter because the
       script's code won't execute until the event it's tied to occurs. -->
  <script>
    // Set up a function to be called when the right event occurs
    window.addEventListener("DOMContentLoaded", function(){
      // Just have the script locate the element(s) you want to work with:
      var nestedDiv = document.querySelector(".two"); // Finds first element that has the "two" class
      nestedDiv.textContent = "I've been added dynamically!";
    });
  </script>
</head>
<body>
  <div id='1'>
    <!-- Class names cannot start with a number. -->
    <div class='two'></div>
  </div>
</body>
</html>

Execute javascript line on a specific element

2 Answers2