How to modify an object with Jquery that was generated dynamically by Javascript?

Question

I want to append text to an object that was created by Algolia search in the browser. This is the chunk that was created by Algolia:

<div id="editing-view-port">
    <div></div>
</div>

I want to insert a string into the inner div. This is what I tried:

$(document).find('#editing-view-port > div').append(e.results[0][0].transcript);

Where e.results[0][0].transcript is my string. I can append this to an object that was NOT created by Algolia search. I suspect this has something to do with delegation, or event binding, but I'm unsure how to accomplish this?

UPDATE FOR CLARITY:

This is how I tested an object created by Algolia vs. an object created by me...

My JS:

$(document).find('#editing-view-port > div').append(e.results[0][0].transcript); // this is an Algolia object
$(document).find('#my-object > div').append(e.results[0][0].transcript); // this is an object created by me

The string is "test"

The resultant HTML:

<div id="editing-view-port">
    <div></div>
</div>

<div id="my-object">
    <div>test</div>
</div>

It may be worth noting that when I inspect the dynamically generated section in Chrome, this wraps the section:

#shadow-root (user-agent) == $0

How the element was created in the dom is not relevant to being able to manipulate it. jQuery *is* javascript, but that isn't a concern with this question. If it exists in the dom, you can modify it. Verify that your find is finding the element that you want to change, and that e.results[0][0].transcript contains the correct string you want to put in it. If either of those two things are not true, then you are trying to find an element that does not exist yet, or you are using an incorrect selector, and whatever issues you may have in regards to the transcript not having the right value. — Taplar, May 02 '18 at 15:10
I understand that JQuery is JS but I was trying to be precise in my title because the Algolia search is using straight-up JS to generate elements and I'm using JQuery to modify. Yes, my string has a value because I can append it to an object that was not generated dynamically. The item does exist in the DOM as indicated above #editing-view-port > div, however, it does not exist until after page load. In other words, I can see it in my Elements tab in Chrome, so I assume it's in the DOM? I also assume I'm referencing the child element properly using '>'? — Vaughn D. Taylor, May 02 '18 at 15:16
`>` is the operator to indicate a direct child. So you have verified that the selector is finding the element? How did you verify this? — Taplar, May 02 '18 at 15:18
The element does not exist in my HTML, so I assume it's generated by the Algolia script on load? — Vaughn D. Taylor, May 02 '18 at 15:32
Add `console.log($('#editing-view-port > div').length)` in your script immediately before the point that you are trying to update it's value. If that prints 0 to the console, the element does not exist in the dom with that selector. That is how you verify that an element exists. — Taplar, May 02 '18 at 15:34
Are you trying to append text before or after, it was created by Algolia? — Alex Baban, May 02 '18 at 15:38
It's returning 0, so it doesn't exist in the DOM. So, is there any way to append to it? It shows in my elements tab in Chrome, but I guess that doesn't mean it exists in the DOM? — Vaughn D. Taylor, May 02 '18 at 15:39
The issue is, as others have stated, that you're trying to modify an element that doesn't (yet) exist. An alternative to modifying Algolias elements (which may likely break things anyway) is to add your text next to the element and use CSS to position it where you need. — powerbuoy, May 02 '18 at 16:10

Zim84 · Answer 1 · 2018-05-02T16:02:37.367

1

Your problem seems to be that the element does not exist at the moment your insert script is being executed. When you inspect the HTML with your browsers inspector, the element is there. Thus, the element has been created somewhen in between. What you need is to know when it gets inserted and after that point insert your text. If you cant get that point exactly, you should try to detect it. See details and possible solutions in: How can I detect when a new element has been added to the document in jquery?

Edit: please state in a comment what should be adabted if you downvote. Thx.

edited May 02 '18 at 16:02

answered May 02 '18 at 15:40

Zim84

3,404
2
35
40

This... "answer" doesn't provide a solution. it simply explains the situation the op is in in different words. – Kevin B May 02 '18 at 16:09
Well. Strictly, the op doesnt know the real problem yet. With my answer he does. So its actually a duplicate – Zim84 May 02 '18 at 16:13
if it's a duplicate, close it as such, but i don't think it is. The question is too unclear to be a duplicate. For all we know, this tool they're using may have a callback that can be used. – Kevin B May 02 '18 at 16:14

How to modify an object with Jquery that was generated dynamically by Javascript?

1 Answers1