如何解决有没有办法在特定的div中加载用javascript生成的html?
我有一个javascript函数,可以生成一些html内容。 但是我正在使用的事件侦听器在页面末尾加载内容。*我希望将其加载到特定的div中。
window.addEventListener("DOMContentLoaded",(event) => {
createForm(<?PHP echo json_encode($training_array,JSON_PRETTY_PRINT) ?>);
});
我也尝试了div中的onload属性...但是stll不起作用:
<div id="bdd"onload="createForm(<?PHP echo json_encode($training_array,JSON_PRETTY_PRINT) ?>);"></div>
createForm函数:
function createForm(arr){
ct++;
de++;
na++;
const form = document.getElementById("formed");
const divi = document.getElementById("bdd");
arr.forEach(element => {
const a = element.training_diploma;
const b = element.training_school;
const c = element.training_level;
const d = element.training_start_date;
const e = element.training_end_date;
const training_diploma = document.createElement('input');
training_diploma.setAttribute('value',a)
training_diploma.setAttribute('name','saved_training['.concat(ct,'][training_diploma]'))
training_diploma.required = true
const training_school = document.createElement('input');
training_school.setAttribute('value',b)
training_school.setAttribute('name','][training_school]'))
training_school.required = true
const divSelect = document.createElement('div');
divSelect.setAttribute('class','select')
const training_level = document.createElement('select');
training_level.setAttribute('value',c)
training_level.setAttribute('id','rec_mode')
training_level.setAttribute('name','][training_level]'))
training_level.required = true
const option1 = document.createElement('option');
option1.disabled = true
option1.innerHTML='-- Type de diplôme --';
const option2 = document.createElement('option');
option2.innerHTML='Formation'
if (option2.innerHTML == c) {
option2.selected = true
}
const option3 = document.createElement('option');
option3.innerHTML='Brevet'
if (option3.innerHTML == c) {
option3.selected = true
}
const option4 = document.createElement('option');
option4.innerHTML='Bac'
if (option4.innerHTML == c) {
option4.selected = true
}
const option5 = document.createElement('option');
option5.innerHTML='Bac +1'
if (option5.innerHTML == c) {
option5.selected = true
}
const option6 = document.createElement('option');
option6.innerHTML='Bac +2'
if (option6.innerHTML == c) {
option6.selected = true
}
const option7 = document.createElement('option');
option7.innerHTML='Bac +3'
if (option7.innerHTML == c) {
option7.selected = true
}
const option8 = document.createElement('option');
option8.innerHTML='Bac +4'
if (option8.innerHTML == c) {
option8.selected = true
}
const option9 = document.createElement('option');
option9.innerHTML='Bac +5'
if (option9.innerHTML == c) {
option9.selected = true
}
const option10 = document.createElement('option');
option10.innerHTML='Doctorat'
if (option10.innerHTML == c) {
option10.selected = true
}
const training_start_date = document.createElement('input');
training_start_date.setAttribute('type','month')
training_start_date.setAttribute('value',d)
training_start_date.setAttribute('name','][training_start_date]'))
training_start_date.required = true
const training_end_date = document.createElement('input');
training_end_date.setAttribute('type','month')
training_end_date.setAttribute('value',e)
training_end_date.setAttribute('name','][training_end_date]'))
training_end_date.required = true
const div = document.createElement('div');
div.setAttribute('id','row-'+ct++)
div.setAttribute('class','training_container')
const del = document.createElement('a');
del.setAttribute('href','javascript:removeSavedTraining('.concat(de++,')'))
del.setAttribute('class','remove_button')
del.innerHTML='- Supprimer cette formation'
form.appendChild(divi);
divi.appendChild(div);
div.appendChild(training_diploma);
div.appendChild(training_school);
div.appendChild(divSelect);
divSelect.appendChild(training_level);
training_level.appendChild(option1);
training_level.appendChild(option2);
training_level.appendChild(option3);
training_level.appendChild(option4);
training_level.appendChild(option5);
training_level.appendChild(option6);
training_level.appendChild(option7);
training_level.appendChild(option8);
training_level.appendChild(option9);
training_level.appendChild(option10);
div.appendChild(training_start_date);
div.appendChild(training_end_date);
div.appendChild(del);
});
}
window.addEventListener("DOMContentLoaded",JSON_PRETTY_PRINT) ?>);
});
有什么主意吗?非常感谢法国!
解决方法
您可以使用element.innerHTML
来完成
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
,结合使用docuemnt.getElementById
和innerHTML
可以解决问题。
document.getElementById("content").innerHTML = "Your content here";
<!-- The element where you want the text -->
<div id="content"></div>
,
找到答案!
基本上,正如每个人都说的那样,缺少“回报”!只需找出要放置的位置!function createForm(arr){
ct++;
de++;
na++;
const form = document.getElementById("formed");
const divi = document.getElementById("bdd");
arr.forEach(element => {
const a = element.training_diploma;
const b = element.training_school;
const c = element.training_level;
const d = element.training_start_date;
const e = element.training_end_date;
const training_diploma = document.createElement('input');
training_diploma.setAttribute('value',a)
training_diploma.setAttribute('name','saved_training['.concat(ct,'][training_diploma]'))
training_diploma.required = true
const training_school = document.createElement('input');
training_school.setAttribute('value',b)
training_school.setAttribute('name','][training_school]'))
training_school.required = true
const divSelect = document.createElement('div');
divSelect.setAttribute('class','select')
const training_level = document.createElement('select');
training_level.setAttribute('value',c)
training_level.setAttribute('id','rec_mode')
training_level.setAttribute('name','][training_level]'))
training_level.required = true
const option1 = document.createElement('option');
option1.disabled = true
option1.innerHTML='-- Type de diplôme --';
const option2 = document.createElement('option');
option2.innerHTML='Formation'
if (option2.innerHTML == c) {
option2.selected = true
}
const option3 = document.createElement('option');
option3.innerHTML='Brevet'
if (option3.innerHTML == c) {
option3.selected = true
}
const option4 = document.createElement('option');
option4.innerHTML='Bac'
if (option4.innerHTML == c) {
option4.selected = true
}
const option5 = document.createElement('option');
option5.innerHTML='Bac +1'
if (option5.innerHTML == c) {
option5.selected = true
}
const option6 = document.createElement('option');
option6.innerHTML='Bac +2'
if (option6.innerHTML == c) {
option6.selected = true
}
const option7 = document.createElement('option');
option7.innerHTML='Bac +3'
if (option7.innerHTML == c) {
option7.selected = true
}
const option8 = document.createElement('option');
option8.innerHTML='Bac +4'
if (option8.innerHTML == c) {
option8.selected = true
}
const option9 = document.createElement('option');
option9.innerHTML='Bac +5'
if (option9.innerHTML == c) {
option9.selected = true
}
const option10 = document.createElement('option');
option10.innerHTML='Doctorat'
if (option10.innerHTML == c) {
option10.selected = true
}
const training_start_date = document.createElement('input');
training_start_date.setAttribute('type','month')
training_start_date.setAttribute('value',d)
training_start_date.setAttribute('name','][training_start_date]'))
training_start_date.required = true
const training_end_date = document.createElement('input');
training_end_date.setAttribute('type','month')
training_end_date.setAttribute('value',e)
training_end_date.setAttribute('name','][training_end_date]'))
training_end_date.required = true
const div = document.createElement('div');
div.setAttribute('id','row-'+ct++)
div.setAttribute('class','training_container')
const del = document.createElement('a');
del.setAttribute('href','javascript:removeSavedTraining('.concat(de++,')'))
del.setAttribute('class','remove_button')
del.innerHTML='- Supprimer cette formation'
form.appendChild(divi);
divi.appendChild(div);
div.appendChild(training_diploma);
div.appendChild(training_school);
div.appendChild(divSelect);
divSelect.appendChild(training_level);
training_level.appendChild(option1);
training_level.appendChild(option2);
training_level.appendChild(option3);
training_level.appendChild(option4);
training_level.appendChild(option5);
training_level.appendChild(option6);
training_level.appendChild(option7);
training_level.appendChild(option8);
training_level.appendChild(option9);
training_level.appendChild(option10);
div.appendChild(training_start_date);
div.appendChild(training_end_date);
div.appendChild(del);
});
return divi;
}
window.addEventListener("DOMContentLoaded",(event) => {
document.getElementById("training").appendChild(createForm(<?php echo json_encode($training_array,JSON_PRETTY_PRINT) ?>));
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。