1

I know that there are plenty answers to this question on stackoverflow, but I can´t find one that give me an answer that can help me to solve a question that came out after read a lot of Javascript, JQuery articles and using those languages for several months.

Here is the deal:

Apparently, I can do a generic site that can charge a Dom dynamically, I read article that says that do this and adding element to the dom at the time the page is loading is dangerous, and use this on framework like Angularjs is almost a sin to think on angular as a jquery background.

So, with that in mind.

Why is such a big deal to make a Dom loading dynamically (input a Json File)?

And the finally Question is, there’s a right way to do it? Thanks in advance!

ivan_pozdeev
  • 583
  • 3
  • 15
dgnF
  • 13
  • 4
  • "Why is such a big deal to make a Dom loading dynamically (input a Json File)?" -- can you expand on that question a little? It's hard to tell what you're asking. – Hey Jan 13 '15 at 19:24
  • @Hey Yes, For sure, just think that you have a structure in which you have a definition of a Form with lots of inputs, textbox, checkbox and all those stuffs, but in this article [link](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) You can see in the first point that if you are using a framework like AngularJs you can't make the same that is used on Jquery and manage elements binding those dom elements, so why they give up and saying that Angularjs got not same paradigm as Jquery – dgnF Jan 13 '15 at 20:25
  • 1
    I think the point of that answer is just that if you're using Angular you shouldn't be modifying the document directly (with jQuery, vanilla JS, or anything else), you should be doing it the "Angular way." If you aren't using Angular, just remember to build up node trees and insert them into the document all at once instead of making many small changes to the document. – Hey Jan 14 '15 at 03:55

2 Answers2

1

Just to give a quick and easiest example using jQuery:

<span id="main"></span>
<button onclick="add();">Click Me</button>

function add(){
$("#main").html("<h1>Hello</h1>");
}

The <span> will be populated with <h1>Hello</h1> on button click

You can run the above example here: http://jsfiddle.net/29mydshx/

Saurabh Sharma
  • 119
  • 3
  • Can you explain how this example of modifying a document answers the question? Are you saying this is the best way to do it? – Hey Jan 13 '15 at 19:29
  • Thanks @Saurabh Sharma But i what i was looking for a performance and stability way of do the dom manipulation. – dgnF Jan 13 '15 at 23:46
0

I think you should use jQuery when you manipulate an existing DOM. Of course with jQuery you can insert HTML snippets too, but i think its harder to separate the view from the js code in this way.

In Angular you define the view in HTML and the js code will make it workable.

I can summarise the main difference between the jquery and the angular way:

  • with jquery you manipulate DOM (and handle events)
  • with angular you define the view and the behavior
blaskov
  • 58
  • 4
  • Thanks @blaskov that was what I read in some articles but I wasn't that actually this where the scope of this tow technologies. – dgnF Jan 14 '15 at 14:17