javascript - 如何通过 javascript 将较小的框插入表单框？

Question

这就是我所拥有的:

这就是我想要的:

我尝试使用 html-tables，但我无法获得正确的比例，最终得到如下结果:

所以我觉得我需要使用JS将框插入到现有的表单框中。感谢任何对我如何实现这一目标的指示。

Answer 1

下面的代码将在1秒后添加前缀

function addPrefix() {
  var newNode = document.createElement("div");
  var newContent = document.createTextNode("+1"); 
  newNode.appendChild(newContent);
  newNode.style.cssText = "border: 1px solid blue; box-sizing: border-box;height: 30px; line-height: 30px; float: left"

  var targetDiv = document.getElementById("phone");
  var parentDiv = targetDiv.parentNode;

  parentDiv.insertBefore(newNode, targetDiv);
}

setTimeout(addPrefix, 1000);

#phone{
  height: 30px; 
  box-sizing: border-box;
 }

<form id="myForm">
<input type="text" name="phone" id="phone" placeholder="Mobile or email" />
</form>