Using jquery append method

Question

In my code I did something like

$("#jdoe").append("<h3>Test</h3>");

html

<html>
<head>
</head>
<body>
<div id="jdoe"></div>
</body>
</html>

It worked as expected (The text Test displays in a h3), I was expecting that if I do a view source in my browser I would see something like

<html>
<head>
</head>
<body>
<div id="jdoe"><h3>Test</h3></div>
</body>
</html>

Please correct me if my expectations are wrong

@freejosh - that's an exact duplicate, voting to close instead ! — adeneo, Jul 31 '13 at 18:49
@adeneo The comment is automatically added when I cast my initial close vote — freejosh, Jul 31 '13 at 18:50

score 2 · Accepted Answer · answered Jul 31 '13 at 18:45

2

You haven't changed the source of your page, you've changed your DOM. If you use the developer tools for your preferred browser, you'll see the changes there.

I think you can get developer tools for all browsers by hitting F12.

answered Jul 31 '13 at 18:45

Daniel Gimenez

18,530
3
50
70

score 1 · Answer 2 · answered Jul 31 '13 at 18:46

1

Your expectations seem correct...

http://jsfiddle.net/4Uq33/

But to see what it looks like you'll have to use something like Chrome's Inspect Element, not view source.

But I'd suggest doing it more like this:

$("#jdoe").append($("<h3>").text("Text"));

answered Jul 31 '13 at 18:46

Samuel Reid

1,756
12
22

Just curious but what is the benefit of doing it this way over the OP's? – War10ck Jul 31 '13 at 18:48
You can end up chaining more jQuery functions onto the end of it if you need to. For example, `$("#jdoe").append($("
").text("Test").css("color","#f00").on("click",doSomething));`
– Samuel Reid Jul 31 '13 at 18:55
Nice. Learn something new everyday. Thanks buddy! :) – War10ck Jul 31 '13 at 18:56
1

@War10ck - The real benefit is that it uses document.createElement internally, so it actually creates the elements instead of just appending a string of HTML. Creating actual DOM elements is IMO a better approach, but the proper syntax would be `$('
', {text:'Text'});` – adeneo Jul 31 '13 at 19:31
@adeneo I like that approach the best. Thanks for explanation buddy. :) – War10ck Jul 31 '13 at 19:39

score 0 · Answer 3 · answered Jul 31 '13 at 18:46

0

your "view source" will be as the same html you get from the server.

Any manipulation with javascript/jquery will not apply.

answered Jul 31 '13 at 18:46

score 0 · Answer 4 · answered Jul 31 '13 at 18:48

0

You need to access the console, not the source. In Google Chrome this can be done by pressing Ctrl+Shift+J, from there you can access the other developer tools.

answered Jul 31 '13 at 18:48

notquiteamonad

1,159
2
12
28

Using jquery append method

4 Answers4

").text("Test").css("color","#f00").on("click",doSomething));`