Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
So, i have this html code:
<div class = "form_wrappers">
<div class = "form">Hello
</div>
</div>
<a class = "destiny_add">
And jQuery code:
function addBlock() {
$('.destiny_add').on('click', function (e) {
e.preventDefault();
$('.form_wrappers').append($('form'))
});
}
I want to add a lot of <div class = "form"> in <div class = "form_wrappers>
How can i make it?
Now it tottaly does not work
There are a couple of issues with your code.
Your jquery is inside the function 'addBlock' which is never called.
You're missing the dot in your append $('form')
You need to append the html of the element, not the element itself.
I also included your code in the .ready() to make sure the elements are loaded before jquery tries to run it.
See the code below
$(function() {
$('.destiny_add').on('click', function (e) {
$('.form_wrappers').append('<div class="form">'+$('.form').html()+'</div>');
});
})
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Like how you can.
document.querySelectorAll('div').forEach((div) => {
div.onclick = () => {
console.log(this.dataset.id)
}
});
How can i do it if div was a class .email
How can i make it work?
and how can put a class and a dataset thorough Javascript because I created an element.
Refrain from using onclick, or any onEvent property on element. Instead, use element.addEventListener(eventType, callbackFn)
function printDatasetId(e){
console.log(this.dataset.id);
}
document.querySelectorAll('.email').forEach(email => email.addEventListener('click', printDatasetId))
<p class="email" data-id="adam#hey.com">adam#hey.com</p>
<p class="email" data-id="jeff#hey.com">jeff#hey.com</p>
document.querySelectorAll('.myClass').forEach((element) => {
element.onclick = () => {
console.log("hello")
}
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I'm doing this tutorial and this guy says, "I'm going to create a div..."
$("document").ready(function() {
// fetch the AJAX content
$("#newsContent").load("news.txt");
//$.getJSON("news.json", successFn);
});
function successFn(result) {
$.each(result.newsStories, function(i, item) {
// Didn't quite understand what this line did.
var newsDiv = $("<div class='news'>");
newsDiv.append(item.title);
newsDiv.append(item.content);
// Now understand that this puts the above div in play.
$("#newsContent").append(newsDiv);
});
}
I'm really only worried about this line:
var newsDiv = $('<div class="news">');
I've tried this on jsfiddle, but it doesn't seem to work. This is happening during the construction of an AJAX request if that helps.
My question is, when does newsDiv become part of the DOM?
$('<div class="news">'); will return $ wrapped object corresponds to an html element (in this example, div element) to you. But not created any element at your html. You can simply add this newly created element to your html like,
$('#myNewsContainer').append(newsDiv); // append to the div with id 'myNewsContainer'
$('#myNewsContainer').html(newsDiv); // replace all html with new div
The line
var newsDiv = $('<div class="news">');
creates a variable newsDiv with value <div class="news">. At this moment it is not appended to html. You can append it to HTML using Jquery append() method.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I am trying to remove script tag from Html Code using JavaScript.
Here is the HTML Code :
<script type='text/x-template-handlebars' id='carousel_ui_buttons_next-nav_next'>
<button class="next nav" asg-button>{{{button_text}}}</button>
</script>
I want to remove script tag so the remaining part would be html only.
I mean code should be changed inside browser.
it would be better if you provided us with the code you currently have to help you understand what happened rather than using the code copy/paste ,anyway to fire the js code you first decide when you want it to kick in
when the page finish loading ?
$(window).load(function() {
$('#carousel_ui_buttons_next-nav_next').remove();
});
or when the page is ready
$(document).ready(function($) {
$('#carousel_ui_buttons_next-nav_next').remove();
});
or if you prefer you can make it as a function and call it as much as
you want instead of repeating the same code over and over everywhere
function hideScript() {
$('#carousel_ui_buttons_next-nav_next').remove();
});
// then use it like //
$(document).ready(function($) {
hideScript();
});
the above code use JQuery which is much easier than vanilla js to understand and to work with.
The content of your <script> tag is invalid Javascript, but here is one possible way of achieving what you are after:
// Function to convert an HTML string to a DOM element
String.prototype.toDOM = function () {
var d = document,
i,
a = d.createElement('div'),
b = d.createDocumentFragment();
a.innerHTML = this;
while (i = a.firstChild) {
b.appendChild(i);
}
return b;
};
// The <script> we wish to replace
var st = document.getElementById('carousel_ui_buttons_next-nav_next');
// Replace it with the <button> that is inside of it
st.parentNode.replaceChild(st.innerHTML.trim().toDOM(), st);
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've got a label for an input. Defined like:
<label for"idofparentelement">innerHTML</label>
Found nothing where the label for hasn't got an id.
How can i remove it with JavaScript without giving an id.
To remove element with specific attribute Use this function:
function removeElem(tag,atr,vl)
{
var els = document.getElementsByTagName(tag);
vl=vl.toLowercase();
for (var i = 0; i<els.length; i++) {
var elem=els[i];
if(elem.getAttribute(atr)){
if ( elem.getAttribute(atr).toString().toLowercase()==vl){
elem.remove();
return;
}
}
}
}
and First of all
Change your html like:
<label for="idofparentelement">innerHTML</label>
Now for your case Use this as: removeElem('label','for','idofparentelement');
Here is the working:
Fiddle
Hope it'll help you cheers :)!!
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
On my page I have a a couple of tables containing product information and their authors. I also have a div containing the hyperlinks for each author. Right now I'm linking the authors names to a hyperlink using javascript:
<script>
onload = myfun;
function myfun(){
var show =document.getElementById('2364').innerHTML;
var link = document.getElementsByClassName('2364');
var item = link[0];
var item2 = link[1];
document.getElementById('2364').innerHTML=item.outerHTML+'; '+item2.outerHTML;
}
</script>
My problem is that I need to get the elements IDs dynamically and I am not sure how to go about this.
EDIT:
Smarty creates the html, here's a part of it:
<tr><td class="PLContent"><span class="manufacturer"><div id={$module_data.PRODUCTS_ID}>
<h3 id={php}echo $e++;{/php}>{$module_data.PRODUCTS_MANUFACTURER_NAME}{$MANUFACTURER_LINK}</h3></div></span>
Dynamic IDs means that when a user clicks on an author the page will be populated with different products and those products will have a different ID.
Thanks for the answers guys, they gave me some ideas. I managed to solve my problem in the following way:
Added an element that contains only the products ID
Changed my code to this:
.
var t1 = document.getElementById('1').innerHTML;
var link = document.getElementsByClassName(t1);
document.getElementById(t1).innerHTML = link[0].outerHTML;
As I have 10 products per page I'll write this function for each product changing the IDs. It may not be very neat but it's doing the job.
HTML:
<div id={$module_data.PRODUCTS_ID}>
<p>{$module_data.PRODUCTS_MANUFACTURER_NAME}</p>
<p id={php}echo $e++;{/php}>{$module_data.PRODUCTS_ID}</p>
</div>
Simply you can add a class name to your elements and then get all IDs (assuming your are familiar with jQuery).
<tr><td class="PLContent"><span class="manufacturer"><div class="mydiv" id={$module_data.PRODUCTS_ID}>
<h3 class="myh3" id={php}echo $e++;{/php}>{$module_data.PRODUCTS_MANUFACTURER_NAME}{$MANUFACTURER_LINK}</h3></div></span>
To get IDs:
$(".mydiv").each(function() { alert($(this).attr("id"); });
or
$(".myh3").each(function() { alert($(this).attr("id"); });