Использовать Html код в javascript?

Question

[loed]

Доброго дня, в js фильтре при срабатывание выводится слово "Вы выбрали". Мне необходимо также вывести рядом кнопку сброса

<button type="button" class="btn btn-secondary" href="javascript:%20void(0);" id="reset"><i class="fa fa-times" aria-hidden="true"></i>
 <span class="sbros"></span></button>

Сам фрагмент js

if (msg_list.length==0)
			return "" 

		return  [msg[msg_index++],
       "Вы выбрали:", msg_list.join()].join("");

	}

Comments

[Arroman]

Вы хотите её вывести путем добавления тега с кнопкой в html разметку через js?

[loed]

Arroman, да мне надо добавить html код в js который эту кнопку выведет на страничке при срабатывании фильтра

[Arroman]

loed, это можно. Сам учусь, но недавно как раз делал такое. Не знаю, насколько это решение корректно, но у меня работает.
Допустим, у нас есть родителький блок, куда будет вставляться эта кнопка. id задам например 'filter'. В js добавляем строковую переменную, назовем её htmlresbtn. Сюда мы пишем html нашей кнопки сброса.
Например:

let htmlresbtn= "<button id='btn-res' class='btn'>Cброс</button>";

Затем мы должны её вывести. Сделать это можно например с помощью команды insertAdjacentHTML. Делается это так:

document.getElementById('filter').insertAdjacentHTML('afterBegin', htmlresbtn);

Т.е. я добавляю кнопку в родительский блок filter. Её расположение будет определяться в css. Расположение тега в разметке элемента filter можно выбрать beforeBegin. afterBegin, beforeEnd, afterEnd.
После этого всё как обычно. Получаем доступ к появившейся кнопке через id и вешаем на неё событие onclick с функцией для сброса.
Если кнопку надо будет убрать, используем команду remove().

[loed]

вот эта строка ("Вы выбрали:", msg_list.join()].join("");) в моем скрипте и так выводит что нужно и кода нужно. Мне надо просто что бы эта строка вывела помимо "вы выбрали" еще и код кнопки

Answer 1

[Павел Корнилов]

Ох, не знаю, правильно ли я вас понял.
Вангую, что вы используете UIkit. Тогда -- примерно так:

Comments

[loed]

да, Вы меня не поняли, я очевидно криво объяснил. Мне нужно вывести кнопку одновременно с "Вы выбрали" потому что "вы выбрали" становится видно пользователю только после того как он выберет параметр в самом фильтре. Я пытался :

"вставить код кнопки сюда",  "Вы выбрали:", msg_list.join()].join("");

но не работает, просто любое слово работает а html нет...

[Павел Корнилов]

loed, тогда сделайте пример в кодпене, пожалуйста. И дайте ссылку.

[loed]

Павел Корнилов, к сожалению я не программист, просто на уровне обывателя ковыряю код.... Я не смогу это быстро сделать. Могу только показать тестовую страничку на сайте

[Павел Корнилов]

loed, дайте лучше фрагмент кода, где есть эта кнопка Вы выбрали.
Просто в коде в вашем вопросе она нигде не участвует. Или давайте тестовую страницу, если я смогу понять, что именно нужно, то помогу.

[Павел Корнилов]

И вы так и не уточнили насчет фреймворков, что используете. Угадал я или нет, остается вопросом.

[loed]

Павел Корнилов, "вы выбрали" в js а кнопка сброса в теле страницы https://www.intast.ru/filter/ . Сам фильтр сделан просто на css и js
Весь js код:

spoiler

function select_el(value){
	if (value){
		var el=document.getElementById(value);
		if (el) el.selected = true;
	}
}


function get_filter_text(push_list ,name, id){
	if (get_filter(id)){
		push_list.push(" "+name+": "+document.getElementById(document.getElementById(id).value).textContent);
	}
}

function get_filter(id){
	var value=document.getElementById(id).value;
	if (value)
		return "."+value;
	else
		return "";
}

function get_option_list(id){
	var option_id = document.getElementById(id).value;

	if (option_id)
		var option = document.getElementById(option_id);

	if (option && option.hide_list)
		return option.hide_list;

	return ""
}


(function(){
	var but = document.getElementById("search");
	var search
	if (!but) return setTimeout(arguments.callee, 1000);

	function reset_fild(id){
		document.getElementById(id).value="";
	}

	function reset_search(){
        reset_fild("uroven")
		reset_fild("cena-vse")
        reset_fild("cenarest")
        reset_fild("cenapr")
		reset_fild("vid")
		reset_fild("raion")
		reset_fild("rasstoianie")
		reset_fild("avto")
        reset_fild("progipit")
        reset_fild("reka")
        reset_fild("basseinyes")
     
		search()
	}

	var res = document.getElementById("reset");

	res.href = "javascript: void(0);"
	res.onclick = reset_search;

	var msg = [
		"",
		"",
		"",
		"",
		"",
		"",
		""

	]

	var msg_index = 0;
	function rmsg(){


		if (msg_index >= msg.length) msg_index = 0;
		var msg_list = []
        get_filter_text(msg_list, "уровень", "uroven")
		get_filter_text(msg_list, "район", "raion")
		get_filter_text(msg_list, "вид", "vid")
		get_filter_text(msg_list, "расстояние", "rasstoianie")
		get_filter_text(msg_list, "проезд на авто", "avto")
		get_filter_text(msg_list, "прож+пит+лодка", "cena-vse")
        get_filter_text(msg_list, "проживание+питание", "cenarest")
        get_filter_text(msg_list, "проживание", "cenapr")
        get_filter_text(msg_list, "прож+пит", "progipit")
        get_filter_text(msg_list, "акватория", "reka")
        get_filter_text(msg_list, "бассейн", "basseinyes")



		if (msg_list.length==0)
			return ""  /* все базы */

		return  [msg[msg_index++],
       "Вы выбрали:", msg_list.join()].join("");

	}

	function add_hide_list(){
		var option_map = {}


		var homes = document.getElementsByClassName("home")

		for(var h = 0; homes.length > h; h++){
			var clases = homes[h].className.split(" ")
			for(var o = 0; clases.length > o; o++){
				for(var oa = 0; clases.length > oa; oa++){
					if (o != oa){
						if (!option_map[clases[o]])
							option_map[clases[o]] = {};

						option_map[clases[o]][clases[oa]]=true;
					}
				}
			}
		}

		for (opt in option_map){
			var option = null
			if (opt)
				option = document.getElementById(opt);
			if (option){
				for(cls in option_map){

					if((opt != cls) && !option_map[opt][cls]){
						var option2 = null
						if (cls)
							option2 = document.getElementById(cls);

						if (option2 && option2.parentNode != option.parentNode){

							if (!option.hide_list)
									option.hide_list = [];

							option.hide_list.push(cls)
						}
					}
				}

				if (option.hide_list){
					option.hide_list.unshift("")
					option.hide_list=option.hide_list.join(",#")
				}
			}
		}
	}

	function set_filters(){
		var params = document.location.hash.replace("#","").split(".");

		for (var i = 0; i <  params.length; i++)
			select_el(params[i]);
	}

	var first_run = true;

	function search(first){
		var hash = [get_filter("cena-vse"), get_filter("cenarest"), get_filter("cenapr"), get_filter("vid"), get_filter("raion"),  get_filter("rasstoianie"),  get_filter("progipit"),  get_filter("avto") ,  get_filter("reka") ,  get_filter("basseinyes")].join("")
		if (hash.length > 0)
			document.location.hash = hash;
		else
			if (first_run)
				first_run = false;
			else
				document.location.hash = "_";

		var cena = document.getElementById("filter");
		var cena_text = [
			".home{display: none} .home",
            get_filter("uroven"),
			get_filter("cena-vse"),
            get_filter("cenarest"),
            get_filter("cenapr"),
			get_filter("vid"),
			get_filter("raion"),
			get_filter("rasstoianie"),
            get_filter("progipit"),
            get_filter("avto"),
            get_filter("reka"),
            get_filter("basseinyes"),
           	"{display: block} #msg:before{content: '"+rmsg()+"'}",
			"#n",
            get_option_list("uroven"),
			get_option_list("cena-vse"),
            get_option_list("cenarest"),
            get_option_list("cenapr"),
			get_option_list("vid"),
			get_option_list("raion"),
			get_option_list("rasstoianie"),
            get_option_list("progipit"),
            get_option_list("avto"),
            get_option_list("reka"),
            get_option_list("basseinyes"),
            "{display: none; -moz-user-select:none;-webkit-user-select:none;user-select:none;}"
			].join("");



		if (typeof cena.textContent == "string")
			cena.textContent = cena_text;
		else
			cena.cenaSheet.cssText = cena_text;

		but.href = document.location.href;
	}

	but.onclick = search;

	set_filters()
    document.getElementById("uroven").onchange = search;
	document.getElementById("raion").onchange = search;
	document.getElementById("vid").onchange = search;
	document.getElementById("cena-vse").onchange = search;
    document.getElementById("cenapr").onchange = search;
    document.getElementById("cenarest").onchange = search;
	document.getElementById("rasstoianie").onchange = search;
    document.getElementById("progipit").onchange = search;
    document.getElementById("avto").onchange = search;
    document.getElementById("reka").onchange = search;
     document.getElementById("basseinyes").onchange = search;

	setTimeout(add_hide_list, 0)
	setTimeout(search, 0)
})()

[Павел Корнилов]

loed, тогда так (на jQuery):