I want to add to the table cell a Font-Awesome icon. But I need to insert it before this cell text. How to do it via JavaScript or Jquery?
That's my code:
var song_nameL = tr.insertCell(0);
song_nameL.innerHTML = songName;
var fa_times = song_nameL.appendChild(document.createElement("i"));
fa_times.className = "fa fa-times";
As you see, it appears after the text. And if I put song_nameL.innerHTML = songName; to the end of this code, there will be no icon.
I tried to increase zIndex of icon, but it didn't help.
You have to prepend that <i> element,
var fa_times = song_nameL.insertAdjacentHTML('afterbegin',"<i class='fa fa-times'></i>"));
by using .insertAdjacentHTML("position", "htmlString");
The HTML code for the <i> element should be in front of / before the song name, so just do:
song_nameL.innerHTML = '<i class="fa fa-times"></i>' + song_nameL;
if you need the object you could use:
var fa_times = document.createElement("i");
fa_times.className = "fa fa-times";
song_nameL.insertBefore(fa_times, song_nameL.childNodes[0]);
Related
I have a button that creates two input fields when someone clicks on the add button. I want to add a font awesome icon right next to the second input field. I tried adding it by using appendChild and innerHTML but that doesn't work at all I just don't get the icon rendered, how can I do it? Here is my code:
const mainParent = document.getElementById('main-parent');
const newPlatformNameInput1 = document.createElement("input");
newPlatformNameInput1.id = index + '_first';
newPlatformNameInput1.classList.add("form-control");
newPlatformNameInput1.classList.add("input");
const newPlatformNameInput2 = document.createElement("input");
newPlatformNameInput2.id = index + '_second';
newPlatformNameInput2.classList.add("form-control");
newPlatformNameInput2.classList.add("input");
const wrapperParent = document.createElement('div');
wrapperParent.id = index + '_parent';
wrapperParent.appendChild(newPlatformNameInput1);
wrapperParent.appendChild(newPlatformNameInput2);
mainParent.appendChild(wrapperParent);
mainParent.appendChild('<i class="fas fa-trash"></i>');
AppendChild expects a node to be passed not plain HTML.
icon = document.createElement("i");
icon.setAttribute("class","fas fa-trash");
mainParent.appendChild(icon);
I am trying to find closing anchor tag. And add Icon after the closing tag.The inside value is coming as a string from database.I need to extract the value and append with icon.
For example
<p>This is a paragraph and link testtestdsfasffdtest1fdfdfdfdfd</p>
In the above example I have paragraph tag inside I have two anchor tag.
Actually the result will come as Test added plus icon testdsfasffd & Test1 added plus icon 2 fdfdfdfdfd
First I need to find the closing anchor tag then i need to append the icon from other functions
Current I am trying like this
var string = '<p>This is a paragraph and link testtestdsfasffdtest1fdfdfdfdfd</p>';
I am setting an pattern
var closingAnchor = '</a>';
string.split(closingAnchor);
after this i need to append icon from other function using for loop. I am getting struggle here kindly please help me.
Splitting HTML is normally a bad bad idea. So just do it with the DOM.
var string = '<p>This is a paragraph and link testtestdsfasffdtest1fdfdfdfdfd</p>';
var div = document.createElement("div");
div.innerHTML = string;
var anchors = div.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
var text = document.createTextNode(' TEXT TO ADD ');
var sibling = anchors[i].nextSibling;
if(sibling) {
anchors[i].parentNode.insertBefore(text, sibling);
} else {
anchors[i].parentNode.appendChild(text);
}
}
console.log(div.innerHTML);
document.getElementById("out").innerHTML = div.innerHTML;
<div id="out"></div>
Here you are: // for regex, <\/a> for </a>, g for search all
var string = '<p>This is a paragraph and link testtestdsfasffdtest1fdfdfdfdfd</p>';
var output = string.replace(/<\/a>/g, '</a>YOUR APPENDEE');
alert(output);
Hope this helps.
I'm trying to build some HTML using jquery and then inject that html into some div on my page. I want to build an anchor element. The href, and the label of my anchor element come from javascript variables. I'm trying to do it like this:
$(function(){
var href = 'http://testing123.com';
var label = 'Anchor label';
var anchor_element = '' + label + '';
});
But this doesn't work. Any idea how I can properly construct my anchor element in javascript/jquery please.
You have to append the result to the DOM. add this line at the end.
$('body').append(anchor_element);
You can ofcourse replace 'body' with any other selector as you like.
$(function(){
var href = 'http://testing123.com';
var label = 'Anchor label';
var anchor_element = '' + label + '';
$('body').append(anchor_element); // add the element to <body>
});
working jsFiddle
Using jquery syntax:
$('<a/>', {
href: 'http://testing123.com',
text: 'Anchor label'
}).appendTo('body');
You can do this:
var href = 'http://testing123.com';
var label = 'Anchor label';
// Create a dynamic anchor element and set the href and label
var $anchor_element = $('<a/>', {
href: href,
text: label
});
// Append the newly created element to DOM,
// here we are appending it to the body
$('body').append($anchor_element);
FIDDLE DEMO
What ever you have write is working fine,But You forgot to append it to the target.
var href = 'http://testing123.com';
var label = 'Anchor label';
var anchor_element = '' + label + '';
$('#target').append(anchor_element);
Working Fiddle
In my HTML file I have to change color with new tag.It will be changed permanently.If it's possible to do.Now I am using below code:
function alertSelection()
{
var range = window.getSelection().getRangeAt(0),
content = range.extractContents(),
span = document.createElement('b');
span.appendChild(content);
var htmlContent = span.innerHTML;
range.insertNode(span);
}
when i press refresh i will be get old one.how to create tag when selecting.
Whenever you want to change some style through then use style
element.style.css attribue = value
Example: span.style.color = "green";
i am adding a input file tag and a link using a javascript function, works great. Now i want to add also a radio button and a text whit this radio... i can add the radio whit no problems, but the text... idk how.
here is the code...
addCampo = function () {
nDiv = document.createElement('div');
nDiv.className = 'archivo';
nDiv.id = 'file' + (++numero);
nCampo = document.createElement('input');
nCampo.name = 'archivos[]';
nCampo.type = 'file';
a = document.createElement('a');
a.name = nDiv.id;
a.href = '#';
a.onclick = elimCamp;
a.innerHTML = ' Eliminar';
portada = document.createElement('input');
portada.name = 'portada';
portada.type = 'radio';
portada.value = '1';
nDiv.appendChild(nCampo);
nDiv.appendChild(portada);
// HERE I WANT A SIMPLE TEXT SAYING WHATS DOES THE RADIO =)
nDiv.appendChild(a);
container = document.getElementById('adjuntos');
container.appendChild(nDiv);
}
this is working just fine! the only thing i dont know is how to add text whitout tags...
You need
text = document.createTextNode('what the radio does');
nDiv.appendChild(text);
Although it's better to use a label, because then you don't have to sharp-shoot the radio button. In that case you'd need:
portada.id = 'portada';
text = document.createElement('label');
text.innerText = 'what the radio does';
text.for = 'portada';
nDiv.appendChild(text);
Edit: as mentioned in the comments, innerText is not necessarily supported by all browsers, sorry! Just use innerHTML instead, use textContent if you don't care about old versions of IE, or create a text node and add it to the label node.