原生js创建input节点后,用inputelement.value赋值无效

长翅膀的小颚鱼 2019-04-02 11:13:34
开发中遇到页面上需要用原生js创建节点对象。
创建了一个input节点之后,为其赋值,发现值赋不进去,代码如下:

var inputElem = document.createElement("input");
inputElem.id = "questionScaleRows";
inputElem.name = "questionnaire.lineQuestionTitle";
inputElem.type = "text";
inputElem.size = "40";
inputElem.value = "测试";
lineQuestionTd.appendChild(inputElem);

lineQuestionTd是前面创建的一个<td></td>节点。

这里赋值失败之后发现,当input的type属性为“hidden”时,可以赋值成功。于是修改了代码,先设置input的type为“hidden”,赋值完成之后,修改type为“text”,实践发现这种操作可行,但是不知道原因,请指教!


var inputElem = document.createElement("input");
inputElem.id = "questionScaleRows";
inputElem.name = "questionnaire.lineQuestionTitle";
inputElem.type = "hidden";
inputElem.size = "40";
inputElem.value = "测试";
inputElem.type = "text";
lineQuestionTd.appendChild(inputElem);


这种迂回的方式可行
...全文
429 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
bcsflilong 2019-04-04
  • 打赏
  • 举报
回复
引用 2 楼 _卄毝嬝 的回复:
[quote=引用 1 楼 bcsflilong 的回复:]


<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<body>



<table>
<tr>
<td id="inputElem"></td>
<td>
<button onclick="addInput()"></button>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
window.onload = function() {
var lineQuestionTd = document.getElementById("inputElem");
console.log(inputElem)
var inputElem = document.createElement("input");
inputElem.id = "questionScaleRows";
inputElem.name = "questionnaire.lineQuestionTitle";
inputElem.type = "text";
inputElem.size = "40";
inputElem.value = "测试";
lineQuestionTd.appendChild(inputElem);

}
function addInput() {
var lineQuestionTd = document.getElementById("inputElem");
console.log(inputElem)
var inputElem = document.createElement("input");
inputElem.id = "questionScaleRows";
inputElem.name = "questionnaire.lineQuestionTitle";
inputElem.type = "text";
inputElem.size = "40";
inputElem.value = "测试";
lineQuestionTd.appendChild(inputElem);
}
</script>
</html>


我这样写完全没问题呀


会不会是因为我创建的这个<input>节点的父节点<td>以及<tr>节点,都是新创建的?这些节点都是 document.createElement 新创建的,html中只有table节点。[/quote]你可以在我的这个demo基础上改一下试试
  • 打赏
  • 举报
回复
引用 1 楼 bcsflilong 的回复:


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<body>



	<table>
		<tr>
			<td id="inputElem"></td>
			<td>
				<button onclick="addInput()"></button>
			</td>
		</tr>
	</table>
</body>
<script type="text/javascript">
	window.onload = function() {
		var lineQuestionTd = document.getElementById("inputElem");
		console.log(inputElem)
		var inputElem = document.createElement("input");
		inputElem.id = "questionScaleRows";
		inputElem.name = "questionnaire.lineQuestionTitle";
		inputElem.type = "text";
		inputElem.size = "40";
		inputElem.value = "测试";
		lineQuestionTd.appendChild(inputElem);

	}
	function addInput() {
		var lineQuestionTd = document.getElementById("inputElem");
		console.log(inputElem)
		var inputElem = document.createElement("input");
		inputElem.id = "questionScaleRows";
		inputElem.name = "questionnaire.lineQuestionTitle";
		inputElem.type = "text";
		inputElem.size = "40";
		inputElem.value = "测试";
		lineQuestionTd.appendChild(inputElem);
	}
</script>
</html>
我这样写完全没问题呀
会不会是因为我创建的这个<input>节点的父节点<td>以及<tr>节点,都是新创建的?这些节点都是 document.createElement 新创建的,html中只有table节点。
bcsflilong 2019-04-03
  • 打赏
  • 举报
回复


<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<body>



<table>
<tr>
<td id="inputElem"></td>
<td>
<button onclick="addInput()"></button>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
window.onload = function() {
var lineQuestionTd = document.getElementById("inputElem");
console.log(inputElem)
var inputElem = document.createElement("input");
inputElem.id = "questionScaleRows";
inputElem.name = "questionnaire.lineQuestionTitle";
inputElem.type = "text";
inputElem.size = "40";
inputElem.value = "测试";
lineQuestionTd.appendChild(inputElem);

}
function addInput() {
var lineQuestionTd = document.getElementById("inputElem");
console.log(inputElem)
var inputElem = document.createElement("input");
inputElem.id = "questionScaleRows";
inputElem.name = "questionnaire.lineQuestionTitle";
inputElem.type = "text";
inputElem.size = "40";
inputElem.value = "测试";
lineQuestionTd.appendChild(inputElem);
}
</script>
</html>


我这样写完全没问题呀

50,503

社区成员

发帖
与我相关
我的任务
社区描述
Java相关技术讨论
javaspring bootspring cloud 技术论坛(原bbs)
社区管理员
  • Java相关社区
  • 小虚竹
  • 谙忆
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧