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

Question

这就是我所拥有的：

这就是我的目标：

我尝试使用html-tables，但我不能正确地获得比例并最终得到这样的结果：

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

Answer 1

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

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;