JavaScript/jQuery/jQuery-HTML/add.html at master · lgope/JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        function afterText() {
            var txt1 = `<b>I </b>`;           // Create element with HTML
            var txt2 = $("<i></i>").text("love ");  // Create with jQuery
            var txt3 = document.createElement("b");   // Create with DOM
            txt3.innerHTML = "jQuery!";
            $("img").after(txt1, txt2, txt3);    // Insert new elements after img
        }

        function beforeText() {
            var txt1 = `<b>I </b>`;           // Create element with HTML
            var txt2 = $("<i></i>").text("love ");  // Create with jQuery
            var txt3 = document.createElement("b");   // Create with DOM
            txt3.innerHTML = "jQuery!";
            $("img").before(txt1, txt2, txt3);    // Insert new elements before img
        }
    </script>
</head>

<body>

    <img src="jqueryImg.png" alt="jQuery" width="100" height="140">

    <p>Click the button to insert text after the image.</p>

    <button onclick="beforeText()">Insert before</button>
    <button onclick="afterText()">Insert after</button>

</body>

</html>