All geek questions in one place

How does a function know where it is in the DOM?

I am trying to write a javascript function that adds some DOM nodes to a document in the place where it was called, for example:

...
<div>
  <script type="text/javascript">
    pushStuffToDOMHere(args);
  </script>
</div>
...

I am trying to do this “cleanly” without using the node id property to handle div or innerHTML. for this I need to know where the script tag is located in the document. is there any way to do this?

+3
source share
5 answers

Speaking of cleanliness, I don't think your approach is particularly clean. It is best to give the div a unique identifier and execute your javascript when the DocumentReady event fires.

+13
source

? , . jQuery, .

, document.write() , , .

<html>
<head>
   <script type="text/javascript">
           function dosomething(arg){
              document.write(arg);
           }
   </script>
</head>
<body>
<div>The first Div</div>
 <div>The 
    <script type="text/javascript">
           dosomething("Second");
   </script>
      Div
 </div>
 <div>The
        <script type="text/javascript">
           dosomething("Third");
       </script>
      Div
    </div>
   </body>
</html>

, , , , ?

+3

n3rd , , , , id html, script.

, , script DOM, :

  • id script. (, script .)

    • . <script id="specialagent" type="text/javascript">
  • script , script id.
    • . this.script = document.getElementById('specialagent');

  • ... , parent_ode script.

    • . var targetEl = this.script.parentNode;

  • , .

    • , "onload".
    • . , .

:

<script id="specialagent" type="text/javascript">
var callMe = function(arg1,arg2,arg3) {
    this.script = document.getElementById('specialagent');
    var targetEl = this.script.parentNode.nodeName=="DIV" && this.script.parentNode;
    //...your node manipulation here...
}('arg1','arg2','arg3');
</script>

TEST , DOM , , parentNode. , . , .

:

<html>
<head>
<title>Test In place node creation with JS</title>
</head>
<body>
<div id="one">
    <h2>Child of one</h2>
    <div id="two">
            <h2>Child of two</h2>
            <script id="specialagent" type="text/javascript">
            var callMe = function(arg1,arg2,arg3) {
                this.script = document.getElementById('specialagent');
                var targetEl = this.script.parentNode;
                /*BEGIN TEST*/
                 alert('this.script.id: ' + this.script.id);
                 alert('targetEl.nodeName: ' + targetEl.nodeName + '\ntargetEl.id: '+targetEl.id);
                 alert('targetEl.childNodes.length: ' + targetEl.childNodes.length);
                 var i = 0;
                 while (i < targetEl.childNodes.length) {
                     alert('targetEl.childNodes.'+i+'.nodeName = ' + targetEl.childNodes[i].nodeName);
                     ++i;
                }
                /*END TEST - delete when done*/     
                //...rest of your code here...to manipulate nodes
            }('arg1','arg2','etc');
            </script>
     </div>
 </div>
 </body>
 </html>
+2

, , , dom . jquery , , ,

...
<script type="text/javascript">
    function pushStuffToDOMHere(element)
    {
          $(element).append("<p>Hello</p>"); // or whatever
    }
</script>
<div onclick="pushStuffToDOMHere(this);">

</div>
...
0

- () , :

document.write div . document.onload, div node .

, : HTML, script. , ...

:

function whereMI(node){
    return (node.nodeName=='SCRIPT')? node : whereMI(node.lastChild);
}
var scriptNode = whereMI(document);

, , firebug, HTML node .

0

Source: https://habr.com/ru/post/1708667/

More articles:


All Articles