Question about DOM manipulation

Community Off Topic
1

note up front: code only serves as demonstration purpose

So far my understanding goes, DOM manipulation is expensive, so ideally you manipulate the DOM as less as possible. So lets say i want to insert multiply elements, ideally i manipulate the DOM once, for which there are two options, using a string:

$('#category_list').append("<div class='category_wrapper'><p><a href='/forum/"+json['slug']+"'>"+json['name']+"</a></p><a href='/forum/"+json['slug']+"/delete/' class='categoryDelete' data-slug='"+json['slug']+"'>delete</a><br><a href='/forum/"+json['slug']+"/edit/' class='categoryEdit' data-slug='"+json['slug']+"'>edit</a>")

or using a document fragment:

            var updatedElement = document.createDocumentFragment();
            var div = document.createElement('div');
            var p = document.createElement('p');
            var a = document.createElement('a');
            var remove = document.createElement('a');
            var lineBreak = document.createElement('br')
            var edit = document.createElement('a');
            div.setAttribute("class", "category_wrapper")
            a.setAttribute("href", "/forum/"+json['name'])
            a.textContent = json['name']
            remove.setAttribute("class", "categoryDelete")
            remove.setAttribute("data-slug", json['name'])
            remove.setAttribute("href", "/forum/"+json['name']+"/delete");
            remove.textContent = 'delete'
            edit.setAttribute("class", "categoryEdit")
            edit.setAttribute("data-slug", json['name'])
            edit.setAttribute("href", "/forum/"+json['name']+"/edit")
            edit.textContent = 'edit'
            p.appendChild(a)
            div.appendChild(p)
            div.appendChild(remove)
            div.appendChild(lineBreak)
            div.appendChild(edit)
            updatedElement.appendChild(div)

but which would you use, and why? Or are there other approaches i am unaware of?

2

Check this out, this may help clarify.

1 Like
3

i understand the DOM manipulation, my question is: When doing a lot of DOM manipulation (which expensive) how can i do this efficient? taking into consideration: readability, maintainable, performance and amount of code.

ideally, you would do all the manipulation in one go, for which i show two approaches, i need to know which to use and why, concerning the factors i listed above

4

Ah, I see it’s more complicated than I first thought I guess it depends on how regularly you’d want to change the data. If quickly use the document fragment because it’s easier to quickly navigate a more in depth version. String is easier but less detail. If you know your stuff and confident enough stay with string else the long way with fragment. Hopefully that helped, probably only served in confusing myself, hahah

1 Like
5

Yes, it is :wink:

I am making a simple forum, i actually included snippets of the code. The purpose of the JS code is to:

add categories, questions and answers dynamic to the page (so AJAX)
edit categories, question and answers

The code in the topic is the code i currently use, first snippet is adding new category, second is editing category, given i am unsure what to use yet :wink:

A lot of code in the string causes easy mistakes and difficult modification

Thank you for your help so far, if you have more insight, i would love to hear what you think :slight_smile:

6

I think the first one is more efficient/faster. Even faster would be not using jQuery here.

const list = document.querySelector("#category_list");
list.innerHTML = `<div class="category_wrapper">
                      ...
                  </div>`

If you plan to modify the DOM a lot I’d consider using React.js as it’s best suited for this - and the modules can help a lot with maintenance. Hope this helps :slight_smile:

2 Likes
7

The problem with such a long string is that its difficult to modify and prone to bugs

I never understood ReactJS, its just like Jquery? I need to be able to make AJAX requests as well (to the backend, my django app), how does that work? I looked into ReactJS, but got slightly confused, does ReactJS fit what i need?

I only know about React being fast given it uses a virtualDOM in the form of an object or something, so far my understanding goes

i should really formulate my questions better, after each answer i only ask more questions

8

It is a Javascript library just like jQuery. Its greatest advantage is quick DOM update due to virtual DOM. It just re renders parts that need to be re rendered.
You’re right about maintenance of long strings like this. If you have a lot to do with them, then React can help you a lot with its JSX components. These are not strings and can help you with splitting your big divs into little reusable components which are easy to maintain. I suggest taking codecademy course on this one :slight_smile:

2 Likes
9

React seems the way to go then

i will have to see what i have to do with jquery, given i currently use that for $.ajax() requests.

10

If you choose jquery only for ajax requests, consider a library just for these requests or use fetch(). (Im on phone so cant give you sources)

1 Like
11

i will look into it, thank you for your input :slight_smile:

12

Hello everyone, I am trying to do a simple DOM manipulation in ReactJS, i want the text to be changed when someone clicks on a button, suggestions required from you, help me out with this. Thanks in advance.

Best Regards,
ReactJS Online Training in India