We Keep Coding

Is there a simpler way to set modal-body text by classname

I am using Bootstrap 5.1.3 with Pure Vanilla JavaScript and I am able to set the .modal-body content using below:
function showBSModal(modalid, inputid) {
var myModal = new bootstrap.Modal(document.getElementById(modalid), {});
var theValue = document.getElementById(inputid).value;
const parent = document.getElementById(modalid);
parent.querySelector(".modal-body").innerHTML = "Successfully Delete Uesr with ID: " + theValue;
myModal.show();
};
Here I am passing modalid and my input box's id (inputid) dynamically and getting the desired output.
I tried myModal.querySelector instead of parent.querySelector but that did not work as myModal.querySelector is not accepted by the browser.
Question: Any there a better say to achieve above?

myModal is a modal object and not an HTML element. Let's load the HTML element, store it in a variable and use that instead.
function showBSModal(modalid, inputid) {
let context = document.getElementById(modalid);
var myModal = new bootstrap.Modal(context, {});
var theValue = document.getElementById(inputid).value;
context.querySelector(".modal-body").innerHTML = "Successfully Delete Uesr with ID: " + theValue;
myModal.show();
};

Editing the contents of an object tag with JQuery

I have this JQuery function:
var objects = document.querySelectorAll('object');
// Iterate through objects
$('object').each( function() {
var link = $(this).attr('data');
$(this).append('click here');
});
It goes through all <object> items in a page and appends a link to the end of them (all of the objects in this case are used to create an embed document.) However, I want to edit the function so that it also edits an attribute in the object tag, preferably changing the name attribute, and also add an if statement to check to see if the object tag contains this new name.

You can use .attr() to get/set the name attribute, also you can use .is() along with attribute selector
// Iterate through objects
var $objects = $('object');
$objects.each(function() {
var $this = $(this);
$this.append('<a href="' + $this.attr('data')
'">click here</a>');
var nametoset = ''; //some logic to find the name
if ($objects.is('[name="' + nametoset + '"]')) {
//name already exists so do something
} else {
$this.attr('name', nametoset);
}
});

$('object').each( function() {
var link = $(this).attr('data');
var newlink = $('click here');
newLink.attr("name","jonny");
$(this).append(newLink);
});
OR
$('object').each( function() {
var link = $(this).attr('data');
var newname = "jonny";
var newlink =$ ('click here');
$(this).append(newLink);
});

Get a string and replace a div with a new one

In jquery, I have got the html of a particular div on the page and using it as a string. However please can you tell me how I can remove each class in the string called "video-js" and replace it with another div? I am trying to get a few values off each "video-js" div before replacing it with the new div with those values.
This is what I have so far, but it's not writing back to the string.
var getTheCurrentResults = $(".titanLoaderControlList").html();
var obj=$(getTheCurrentResults);
$('.video-js',obj).each(function(){
var theID = $(this).attr("id");
var videoSRC = $(this).find(".vjs-tech").attr("src");
var posterSRC = $(this).find(".vjs-tech").attr("poster");
$(this).text("<div class='playButtonContainer'><div class='playButton'><div class='playButtonSymbol'></div></div></div><div class='videoInfo' data-video-id='"+theID+"' data-source-video='"+videoSRC+"'><img class='posterInfo' src='"+posterSRC+"'></div>");
});

You should be using .html() to replace the HTML content, not .text().
var getTheCurrentResults = $(".titanLoaderControlList").html();
var obj=$(getTheCurrentResults);
$('.video-js',obj).each(function(){
var theID = $(this).attr("id");
var videoSRC = $(this).find(".vjs-tech").attr("src");
var posterSRC = $(this).find(".vjs-tech").attr("poster");
$(this).html("<div class='playButtonContainer'><div class='playButton'><div class='playButtonSymbol'></div></div></div><div class='videoInfo' data-video-id='"+theID+"' data-source-video='"+videoSRC+"'><img class='posterInfo' src='"+posterSRC+"'></div>");
});

Parse a string in jquery, change something and get the modified string back

I have a string containing html code, something like this: http://jsbin.com/ocoteg/1.
I want to parse this string, make some changes (just for example: change all links to a span), and then get the modified html string back.
Here is a jsbin, where I started this, but I can't make it work: http://jsbin.com/okireb/1/edit.
I get the html string, I parse it with jquery, but I can't replace the links, and get the modified html string back.
UPDATE
Why the downvote? What is the problem with this question?

You can do it in a loop also
dom.each(function(i,v){
if(v.tagName == "A"){
dom[i] = $('<span/>').html($(v).html())[0]; // replace it right away with new span element
}
});
var newString = $('<div>').append(dom.clone()).html(); //<-- to get new string http://stackoverflow.com/a/652771/1385672
console.log(newString);​
EDIT:
Here's how you can do it keeping the other tags
var dom = $(text.split('\n'));
$(dom).each(function(i,v){
var ele = $(v)[0];
if($(ele).is('a')){
dom[i] = $('<div>').append($('<span/>').html($(v).html())).html();
}
});
var newString = dom.get().join('\n');
http://jsbin.com/okireb/32/edit

Use find instead of filter :
var dom = $('<div>'+text+'</div>');
dom.find('a').each(function() {
var el = $(this);
var html = el.html();
var span = $('<span/>').html(html);
el.replaceWith(span);
});
console.log(dom.children()); ​
Note that I wrap everything for the case where the initial dom isn't one element.
Demonstration
To get the html back as a string use
var html = dom.html();

This should be what you want (can be improved)
var text = '<!DOCTYPE html><html><head><meta charset=utf-8 /><title>JS Bin</title></head><body>Link 1Link 2Link 3</body></html>';
var body_content = text.substring(text.indexOf('<body>') + 6, text.indexOf('</body>'));
var $dom = $('<div/>').html(body_content);
$('a', $dom).each(function() {
$('<span>' + $(this).html() + '</span>').insertAfter($(this));
$(this).remove();
});
var text_new = text.replace(body_content, $dom.html());
// text_new contains the entire HTML document with the links changed into spans

You could do it with .replace.
Probably not the nicest way of doing it though.
dom = dom.replace(/<a /g,'<span');
dom = dom.replace(/<\/a>/g,'</span>');
Demo: http://jsbin.com/okireb/14/edit

create id dynamically

I am creating a element dynamically how would i give this an id?
_addQuestionElement : function() {
var el = new Element('div');
el.addClass('dg-question-label');
el.set('html', this._getCurrentQuestion().label);
$(this.html.el).adopt(el);
},
im using moo tools and jquery.
Many Thanks

Your code looks like Mootools, here's how I'd do it (cleaned up your code a bit)
_addQuestionElement: function() {
var el = new Element('div', {
'class': 'dg-question-label',
html: this._getCurrentQuestion().label,
id: 'yourId'
});
$(this.html.el).adopt(el);
}
If you're generating the same element multiple times, your id will need to somehow be unique each time.
You could also do without that el variable (unless of course it's used somewhere further in the function that you didn't include)
_addQuestionElement: function() {
$(this.html.el).adopt(new Element('div', {
'class': 'dg-question-label',
html: this._getCurrentQuestion().label,
id: 'yourId'
}));
}​

Just assign the id via (if you created the element with new Element()):
var yourCustomId = "myId";
el.id = yourCustomId;
Or use Mootools attr-setting capabilities:
var yourCustomId = "myId";
el.setProperty("id", yourCustomId);

You can give it like this,
var uniqueNumber = 1; //define uniqueNumber globally and increament at each element creation
With javascript
el.id = 'idprefix' + uniqueNumber++)
With jQuery
$(el).attr('id','idprefix' + uniqueNumber++);

In jQuery, to create a div with an ID, you would do something like this:
function createDiv(id) {
$("body").append("<div id=" + id + "></div>");
}
createDiv("myNewDivId");

_addQuestionElement, I think you need to generate a unique id for each question element.
var IDs = 0;
var pfx = "id_";
_addQuestionElement : function() {
...
el.attr("id", pfx + ++IDs);

var el = $('<div />') .attr('id', myVal);

all elements created or accessed by MooTools automatically get a unique uid (for the DOM) anyway, saves you from having to keep state yourself (if you want to be doing this automatically).
console.log( Slick.uidOf( new Element('div') ) )
so...
_addQuestionElement: function() {
var el = new Element('div.dg-question-label', {
html: this._getCurrentQuestion().label
});
// prefix number with uid-
el.set('id', 'uid' + Slick.uidOf(el)).inject(this.html.el);
},
to give it an id via the combined element constructor, it goes:
var el = new Element('div#someid.dg-question-label') or add it in the properties passed to the constructor:
new Element('div', { id: 'foo' })

You can use the jQuery plugin idfy.
Full Disclosure: I wrote that plugin :)