We Keep Coding

Put JavaScript value inside HTML

How to put JavaScript value inside HTML ?
I am trying to put JavaScript value inside HTML like below.
<p>
Check your Credit Score Here
</p>

To achieve the results, you can make use of document.getElementById('').href property:
HTML (added the id attribute to the <a> tag):
<p>
Check your Credit Score <a id="link" href="" target="_blank">Here</a>
</p>
JavaScript:
window.onload = function() {
var first_name = 'Peter';
document.getElementById('link').href = 'http://someaddress.com?first_name='+ first_name;
// debug your results
console.log(document.getElementById('link').href);
}
Here is the JSFiddle

do this if you want to change the link
document.querySelector('a').href = "http://someaddress.com?first_name=" + first_name;

You can do like this
<p>
Check your Credit Score
<a href="http://someaddress.com?first_name='+ first_name +'" target="_blank"
>Here</a >
</p>
<script type="text/javascript">
const a = document.querySelector('a');
const first_name = 'John';
a.href = 'http://someaddress.com?first_name=' + first_name ;
</script>

For best practice do an if check otherwise your selector might not be found in the dom.
Also, if in querySelector("...anything...") not querySelector("a") is given the editor won't suggest the href prop that exists or not. Hence, setAttribute makes more sense.
const URL = "http://someaddress.com?first_name="
const name = 'adiat'
const anchor = document.querySelector(".what-ever")
if(anchor){
anchor.setAttribute("href", `${URL}${name}`);
}else{
console.warn("element not found to replace href attribute")
}
// shorthand -> anchor?.setAttribute("href", `${URL}${name}`);

A robust way would be to use a token to replace, I've used {{FirstName}}. Use an attribute selector to select via that token then replace that token on the href attribute
let firstNameLinks = document.querySelectorAll("a[href*='{{FirstName}}'");
let firstName = "Bob";
for(i = 0; i < firstNameLinks.length; i++){
console.log(firstNameLinks[i].href)
firstNameLinks[i].href = firstNameLinks[i].href.replace("{{FirstName}}", firstName);
}
A link
Another link

get a specific id value from a html string in javascript via jquery

I have this html string in a javascript variable and want to get the id value.
I converted it to pure html and than I tried to get the id value of the div.
var rowData = "<div class='multiid' id='3041' style='height:100%;' >test</div>";
var multiidhtml = $(rowData);
var multiid = multiidhtml.find('.multiid').attr("id");
The result should be var multiid = 3041 but it does not work.

The attribute id you are looking for is in the jQuery object itself. But find(.multiid) looks for elements with class multiid inside the object (as nested elements) which does not realy exists and the attr() returns undefined.
Try multiidhtml.attr("id");
var rowData = "<div class='multiid' id='3041' style='height:100%;' >test</div>";
var multiidhtml = $(rowData);
var multiid = multiidhtml.attr("id");
console.log(multiid);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Consider the following example where you can use find() meaningful:
var rowData = "<div id='3041' style='height:100%;' >test <p class='multiid' id='myParagraph'>Nested P</p></div>";
var multiidhtml = $(rowData);
var multiid = multiidhtml.find('.multiid').attr("id");
console.log(multiid);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

.find() searches the descendants of the element, it won't match the element itself. You should wrap the HTML in another DIV so it won't be the top-level element.
var multidhtml = $("<div>", {html: rowData});
var multiid = multidhtml.find(".multiid").attr("id");
This is only necessary if .multiid might not be the top-level element. If it's always the top, use the simpler solution in the other answer.

.find() searches the descendants of the element, it won't match the element itself. SO use .closest() so that it searches from the root of selector DOM
var rowData = "<div class='multiid' id='3041' style='height:100%;' >test</div>";
var multiidhtml = $(rowData);
var multiid = multiidhtml.closest('.multiid').attr("id");
if you're sure that id attribute exists in the selected DOM you can directly find like this
multiid = multiidhtml.attr("id");

var rowData = "<div id='3041' style='height:100%;' >test <p class='multiid' id='myParagraph'>Nested P</p></div>";
var multidhtml = $("<div>", {html: rowData});
var multiid = multidhtml.find(".multiid").attr("id");

querySelector to get specific node value with ng-if property

I was searching javascript code to get the content of HTML tag having attribute name ng-if="desc.description" using javascript querySelectors.
<li ng-bind-html="esc.description" ng-if="desc.description">Hello world.</li>

Use an attribute selector.
var contents = document.querySelector("[ng-if='desc.description']").innerHTML

Use getAttribute() method
Your Element
<script>
var a = document.getElementById('hey')
var x = a.getAttribute('ng-if') // "/"
alert(x);
</script>

Define Id value.
HTML:
<li id="id-ex" ng-bind-html="esc.description" ng-if="desc.description">Hello world.</li>
JS:
var myInnerHtml = document.getElementById("id-ex").innerHTML;

JQuery id targeting with a variable

I am trying to target an id element using a variable in jquery, like so:
var liked_artist = $('#js-helper-liked-artist').val();
var artist_id = $('#js-helper-artist-id').val();
var target = '#individual' + artist_id + '';
$(target).addClass('individual-heart-hover');
However, this is not targeting the id it should correctly. Any ideas? I've tried it without the empty string at the end as well.
EDIT:
HTML:
<i class="fa fa-heart fa-stack-1x individual-heart" id="individual-{{$artist->id}}"></i>
individual-{{$artist->id}} renders as individual-8
and artist_id is 8 (console.log shows this).

Shouldn't it be var target = '#individual-' + artist_id + '';? Unless it's a typo in your post, I think you are missing the dash.

did you enclose your code in the document ready function?
$(document).ready(function() {
// ....
});

img SRC from first cell in a row with jquery

i have a table such that each row is like this
<tr>
<td><input/> <img id="foo" src="redMinus.png"/></td>
some more tds
<td> <a onclick="wow('foo',$(this))"></a>
</tr>
I want to find out if the img in the first td has an src that contains "redMinus"
This is what I have but it doesnt seem to be working?
function wow(id, item){
var tr$ = item.parentNode.parentNode;
var details = tr$.find('img[src*="redMinus"]');
}
Any ideas?
Thanks!

You're mixing jQuery with DOM elements.
Change your code to
var details = item.closest("tr").find('img[src*="redMinus"]');

Your parameter is given the name item within your function, but you are trying to use a variable with the name item$ instead. Either rename the parameter or use the correct parameter name in the function.

var same = "redMinus" == $(this).parent('td').prev().children('img').attr('src').substring(0,7);

function wow(id, item){
var src = $('#' + id).attr('src');
var srcIndex = src.indexOf('redMinus');
if(srcIndex >= 0)
// redMinus is present in the string
else
// redMinus is not present in the string
}