ابحث عن مثال JavaScript بسيط يقوم بتحديث DOM

https://stackoverflow.com/questions/44190

09-06-2019
|

سؤال

أنا أبحث عن مثال JavaScript بسيط يقوم بتحديث DOM.
أي اقتراحات؟

المحلول

فيما يلي مثال قصير لجافا سكريبت خالص.افترض أن لديك div بالمعرف "المحتوى الرئيسي".

var newnode = document.createTextNode('Here is some text.');
document.getElementById('maincontent').appendChild(newnode);

بالطبع، الأمور أسهل كثيرًا (خصوصًا عندما تريد القيام بأشياء أكثر تعقيدًا) باستخدام jQuery.

نصائح أخرى

@ رافي

إليك مثال عملي للتعليمات البرمجية الخاصة بك

<html>
    <head>
    <title>Font Detect please</title>

    <script src="prototype.js" type="text/javascript"></script>
    <script type="text/javascript">
        function changeTD()
        {
            $('Myanmar3').innerHTML = 'False';         
        }
    </script>
    </head>
    <body>              

        <table border="1">
        <tr><td>Font</td><td>Installed</td></tr>
        <tr><td>Myanmar3</td><td id="Myanmar3">True</td></tr>
        </table>        

        <a href="javascript:void(0);" onclick="changeTD();">Click Me</a>

    </body>
</html>

ستلاحظ أنني أضفت رابطًا صغيرًا يتعين عليك النقر فوقه لإجراء التغيير فعليًا.اعتقدت أن هذا قد يجعل من السهل تجربتها بشكل حقيقي.

أعتقد أن هذا البرنامج التعليمي على jQuery يحتوي على مثال قد يساعدك: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

قد يعطي سؤال أكثر تحديدًا نتائج أكثر فائدة، ولكن إليك زوجًا بسيطًا من المقتطفات التي تعرض النص وتقوم بتحديثه لاحقًا في عنصر حاوية الحالة.

// give some visual cue that you're waiting
container.appendChild( document.createTextNode( "Getting stuff from remote server..." ) );

// then later...        
// update request status    
container.replaceChild( document.createTextNode( "Done." ), container.firstChild );

<html>
    <head>
    <title>Font Detect please</title>

    <script src="prototype.js" type="text/javascript"></script>
    <script type="text/javascript">
        $('Myanmar3').update('False');         
        $('Myanmar3').innerHTML;        
    </script>
    </head>
    <body>      

        <table border="1">
        <tr><td>Font</td><td>Installed</td></tr>
        <tr><td>Myanmar3</td><td id=Myanmar3>True</td></tr>
        </table>        

    </body>
</html>

لدي رمز بسيط مثل ذلك أعلاه وأحاول تغيير النتيجة من True إلى false عبر Javascript باستخدام النموذج الأولي.ما الخطأ الذي قد أفعله؟

يحرر:فهمتها.لم أسميها.:د

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow