محرر ويب أونلاين

<!DOCTYPE html>
<html>
<body>
    <h1>JS Replace Element</h1>
    <div id="parent">
        <p>The replaceElement() function can be used to replace a child element.</p>
        <p id="child">This element will be replaced.</p>
    </div>

    <script>
        // parent في المتغير parent يساوي id هنا قمنا بتخزين العنصر الذي يملك
        var parent = document.getElementById('parent');

        // oldChild في المتغير child يساوي id هنا قمنا بتخزين العنصر الذي يملك
        var oldChild = document.getElementById('child');

        // newChild و قمنا بتخزينه في المتغير <p> هنا قمنا بإنشاء وسم
        var newChild = document.createElement('p');

        // newChildText هنا قمنا بإنشاء نص يمكن وضعه في وسم و قمنا بتخزينه في المتغير
        var newChildText = document.createTextNode('Replaced by Javascript.');
        
        // newChild في newChildText هنا قمنا بإضافة
        newChild.appendChild(newChildText);

        // oldChild هنا قمنا بتديل الوسم الذي يمثله المتغير
        // parent الموجود بداخل الوسم الذي يمثله المتغير 
        // newChild بالوسم الجديد الذي يمثله المتغير
        parent.replaceChild(newChild, oldChild);
    </script>
</body>
</html>