I am implementing a search form, for that I need divs dynamically for showing search results.
Now I am trying is,
create the html elements.
for each result, clone the structure and replace the inner html of appropreate elements with my results.
Append the result with the existing results.
but I dont know how to replace the innerhtml with the results.
I have created the following code in html,`
<div id="resultsDiv">
<div id="webResult">
<div id="heading"></div>
<p id="s_item"></p>
<h5 id="s_description"></h5>
<span id="s_offer"></span>
</div>
</div>
and for javascript I have crated,
templete_element=document.getElementById('resultsDiv');
for(i=0;i<result_count;i++){
$("#webResult").clone().insertAfter("#webResult");
}
For each execution of for loop I need to:
replace inner html of id 'heading' with dataArray.root.data.partners[0].item_heading
replace inner html of id 's_item' with dataArray.root.data.partners[0].item_name
replace inner html of id 's_description' with dataArray.root.data.partners[0].item_description
replace inner html of id 's_offer with' dataArray.root.data.partners[0].item_offer
Please forgive me If my language is bad.
thanku.
You should avoid creating elements with duplicate ids on a page, this makes it impossible to reference them as an ID has to be unique. You should change your markup to work with classes instead:
<div id="resultsDiv">
<div class="webResult">
<div class="heading"></div>
<p class="s_item"></p>
<h5 class="s_description"></h5>
<span class="s_offer"></span>
</div>
</div>
After that you can work with those classes instead:
for(i=0;i<result_count;i++){
var myResult = $(".webResult:first").clone().insertAfter(".webResult:last");
myResult.find('.heading').html( 'put dynamic data here' );
}
I used the first and last modifiers to get the first element as the "template" and append it to the last one created in the loop.
Related
I am not sure I gave correct title to my question but I want to ask to do something like:
I want to get HTML content of parent element. By doing this, this will also include HTML tags of children element but I don't want that. I just want children HTML.
For Example:
<div class="test"> This is content of div
<p class="boring_class" style="borinhdlfj"> This is paragraph<br> content.<span><i>As you<br> can</i></span> see I have added <br> tag</p>
</div>
from above example If I use .text() jquery method to get div content I will get text only but not <br> tag. But if I use .html() jquery, this will also include <p class="boring_class" style='dflkdjf'>....</p> but I don't want that.
I just want html of children element which is:This is paragraph<br> content.As you can see I have added <br> tag.
How can I achieve that?
Final output should look like:
This is content of div This is paragraph <br> content.As you can see I have added <br> tag
As one possible interpretation of the question:
Get html of all children, including text [not in a children nodes]
You can use .contents() to include the text nodes of the parent (the parts that aren't in tags, eg "This is content of div") then loop through those to get either text or html depending on where it is, giving:
var output = $(".test").contents().map((i, e) => {
if (e.nodeType == 3)
return $(e).text();
return $(e).html()
})
.toArray()
.join(" ");
console.log(output)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"> This is content of div
<p class="boring_class" style="borinhdlfj"> This is paragraph<br> content.As you can see I have added <br> tag</p>
</div>
Note this includes all whitespace (newlines) which were not included in the question's example output, so you may need to remove these for an exact match.
You can accomplish this in regular javascript by using innerHTML as shown below.
For more info, see: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
const list = document.getElementsByClassName("test")[0];
const inner = list.innerHTML;
const noP = inner.replace(/<p[^>]*>/g, "").replace(/<\/p[^>]*>/g, "").replace(/\n/g,'');
console.log(noP);
<div class="test"> This is content of div
<p class="boring_class" style="borinhdlfj"> This is paragraph<br> content.As you can see I have added <br> tag</p>
</div>
I'm newbie to Javascript, I tried the below code, it works fine for <div> element but not for <P> and <h1> elements
<script type="text/javascript">
function PrintText(){
document.getElementById('heading').innerText = 'Hello World';
}
</script>
<body>
<div id="heading"></div> // Works
<h1 id="heading"></h1> // Not Working
<P id="heading"></P> // Not Working
<button type="button" onclick="PrintText()">Submit</button>
</body>
When I use document.getElementById('heading').innerHTML= 'Hello World'; for <P> and <h1> elements the above script works(Using innerHTML instead of innerText)
Why the innerText property is not working for <p> and <h1> elements?
First suggestion is don't ever put same IDs on multiple elements in same page.
Why?
Because when you do document.getElementById() browser lookup stops when it finds first element of that ID.
Second suggestion is:
Change
innerText
To.
textContent
innerText won't work cross browser. Better to use standard way to put text with textContent.
Problematic here is your are using IDs. An ID is something unique. An ID can't be reused. If you want to assign multiple elements at once give them the same class and call them by class in your Javascript code. This should solve your problem as Javascript does not expect multiple elements to have the same ID and so it is only editing the first element.
Here is The problem i am trying solve. I would like to create a JS script that uses angular to dynamically create div elements while adding an additional expression eg {{levelone}}.
Here is an an example of what i am expecting the output to be if i know i have 5 iterations of Dom elements.
<div ng-switch-when="0">{{levelZero}}</div>
<div ng-switch-when="1">{{levelOneA}}{{levelOneB}}</div>
<div ng-switch-when="2">{{levelTwoA}}{{levelTwoB}}{{levelTwoC}}</div>
etc.....
So as you can see i am adding an expression on each time. I just dont know how i can keep adding them on via a repeat loop and then get them to compile correctly with AngularJS. I am trying to make my DOM as Dynamic as possible.
EDIT
Every time i loop 1 more i am adding an expression ->{{expression}} to the div with JS or angular. I am not hard coding the expression into each div as each div is also dynamically created. But with a twist i am adding that extra expression ie 3 expressions from the previous div and adding one more expression making four. see example below.
<div ng-switch-when="3"{{levelTwoA}}{{levelTwoB}}{{levelTwoC}}</div>
This one below is dynamically generated
<div ng-switch-when="4"{{levelTwoA}}{{levelTwoB}}{{levelTwoC}}{{THIS EXPRESSION IS GENERATED IN js AND ADDED & COMPILED}}</div>
The DOM will be dynamic as long as your data bindings are. I need more info (data model, expectations) to be more accurate but if you set up your data and bind it correctly, it should work. for example if your data looked like this
var data = {
"levelOne" : {},
"levelTwo" : {
"elements" : ["<span id="firstEl"></span>, ...]
},
"levelThree" : {
"elements" : ["<span id="firstEl"></span>, <span id="secondEl"></span>, ...]
}
Then in your template do what #paulgoblin suggested.
}
You could ng-repeat within each switch case. Eg.
<div ng-switch-when="0">
<span>{{levelZero}}</span>
</div>
<div ng-switch-when="1">
<span ng-repeat="expression in levelOne">{{expression}}</span>
</div>
<div ng-switch-when="2">
<span ng-repeat="expression in levelTwo">{{expression}}</span>
</div>
You might want do this with scope function.
<div ng-switch="assignment.id">
<div ng-switch-when="1">{{ getExpressions(assignment.id) }}</div>
<div ng-switch-when="2">{{ getExpressions(assignment.id) }}</div>
</div>
I have this HTML:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
</div>
and want to add more divs after the strong element to result:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
I am trying this:
var row_str = '<div>content here</div>';
$('#region_North_America div:last').html(row_str);
However, there is no change to the html. This is probably so since there is no div within the element selected.
I know that the js is making it to this code because I can print the content of row_str to the console.
So, how can I get to the end of that container element to add the new items?
Thx.
Try:
$("#region_North_America").append(row_str);
using append().
Or:
$("<div>content here</div>").appendTo("#region_North_America");
To create the element on the fly, and place it in the document.
Using the appendTo method.
Your code will just place html in the last div within #region_North_America. Use the append function.
$("div.region-list").append(row_str);
i want to duplicate one element and then assign to new id and names. my aim is later i want find that element again. here is an example:
<div id="contDiv">
<div style="float:left"> filename </div>
<div style="margin-left: 323px"> playtime(in Sek.) </div>
<div id="tl_Einst" class="editor-field">
<select id="Medianames" onchange="change(this)" name="TL_Medianame">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg- for="Filename"> </span>
<select id="playtime" class="playtime" name="playtime" disabled="">
</div>
<input id="More" type="button" onclick="Addfiles()" value="+">
</div>
in the runtime i duplicate the Element "tl_Einst" with its children. then the user changes the content of the combox then i read them and send them to the server. later i get an answer. so i call the GetelementById("newElementID"), but i get always null, if search for the new created element. what can i do?
thank you
marek
The proper syntax is:
var el = document.getElementById("newElementID");
Typically, # is for JQuery or other javascript frameworks, or as #Quention mentions below, can also be used with document.querySelector.
Where are you adding the element to the DOM? Could you include that code too?
Have you added it to the page?
getElementByID will only find an element in the DOM. You can either add it to the page or simply assign it to a variable.
var newElementID= document.createElement("p");
You can now find it in your code with newElementID even if it's not in the page.